JavaScript作用域基础:侦听自定义事件？

Question

关于JavaScript作用域的问题。我有三个文件(我使用的是Backbone，但我不确定这是否相关)。第一个文件定义了Google Maps自定义的infowindow。第二个文件定义了一个Google Maps标记并对其应用了infowindow。最后，第三个文件将标记和其他页面元素添加到地图中。

我希望第三个文件能够监听infowindow上的鼠标悬停事件，并在它们发生时调用其他页面元素上的方法。然而，我的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?

所以我的问题是: infowindow上的鼠标悬停工作得很好，但我希望只要有鼠标悬停，我就能调用myOtherPageElement.start()。如何在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);