Основы JavaScript: слушайте пользовательские события?

Question

Вопрос о области JavaScript. У меня есть три файла (я использую Backbone, хотя я не уверен, что это актуально). Первый файл определяет настраиваемую инфузию Google Maps. Второй файл определяет маркер Google Maps и применяет к нему инфо-окно. И, наконец, третий файл добавляет маркеры и другие элементы страницы на карту.

Я хотел бы, чтобы третий файл мог прослушивать события mouseover в инфо-окне и вызывать методы для других элементов страницы, когда они происходят. Тем не менее, мой JavaScript не достаточно хорошо, чтобы знать, как:

// InfoWindow.js defines the info window & adds a mouseover event 
AI.InfoWindow.prototype = new google.maps.OverlayView; 
AI.InfoWindow.prototype.onAdd = function() { 
    this.listeners = [ 
    google.maps.event.addDomListener(this.$content.get(0), "mouseover", function (e) { 
     clearTimeout(window.hidePopupTimeoutId); 
    }) ... 
    ]; 
}; 

// Marker.js defines the map marker and adds the infowindow 
AI.Marker = function() { 
    google.maps.Marker.prototype.constructor.apply(this, arguments); 
    this.infoWindow = new AI.InfoWindow(); 
} 

// Home.js creates the markers for the map 
var myOtherHomePageElement = new AI.OtherHomePageElement(); 
var marker = new AI.Marker({ 
    data: entity 
}); 
// how to listen to infowindow events here? 

Так что мой вопрос заключается в следующем: Mouseover на InfoWindow работает отлично, но я хочу, чтобы иметь возможность вызывать myOtherPageElement.start() всякий раз, когда есть Mouseover. Как я могу сделать это из файла Home.js?

Answer 1

Вы можете использовать Backbone.trigger и Backbone.on, чтобы уведомить об этом объект в Home.js при наведении указателя мыши.

// InfoWindow.js defines the info window & adds a mouseover event 
AI.InfoWindow.prototype = new google.maps.OverlayView; 
AI.InfoWindow.prototype.onAdd = function() { 
    this.listeners = [ 
    google.maps.event.addDomListener(this.$content.get(0), "mouseover", function (e) { 
     clearTimeout(window.hidePopupTimeoutId); 
     Backbone.trigger('infowindow:mouseover', e); 
    }) ... 
    ]; 
}; 

// Marker.js defines the map marker and adds the infowindow 
AI.Marker = function() { 
    google.maps.Marker.prototype.constructor.apply(this, arguments); 
    this.infoWindow = new AI.InfoWindow(); 
} 

// Home.js creates the markers for the map 
var myOtherHomePageElement = new AI.OtherHomePageElement(); 
var marker = new AI.Marker({ 
    data: entity 
}); 
Backbone.on('infowindow:mouseover', myOtherHomePageElement.start, myOtherHomePageElement);