JavaScript的范围基础：听了自定义事件？

Question

关于JavaScript作用域的问题。我有三个文件（我使用的骨干，虽然我不知道这是有关）。第一个文件定义了Google Maps自定义infowindow。第二个文件定义了一个Google Maps标记，并将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? 

所以我的问题是这样的：在信息窗口的鼠标悬停是工作正常，但我希望能够调用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);