骨幹事件哈希VS jQuery的事件聲明

Question

如果我在一個骨幹視圖的「事件」散列聲明我的事件，就像這樣：

events: { 
     'mouseenter #socialMediaContainer': 'showSocialMediaLinks', 
     'mouseleave #socialMediaContainer': 'hideSocialMediaLinks', 
     'mouseenter #socialMediaContainer .links li': 'emphasizeSocialMediaLink', 
     'mouseleave #socialMediaContainer .links li': 'resetSocialMediaLink', 
    }, 

    // Never gets fired 
    showSocialMediaLinks: function (e) { 
     alert('mouse enter SM'); 
    }, 

    // Never gets fired 
    hideSocialMediaLinks: function (e) { 
     alert('mouse leave SM'); 
    }, 

    // Works fine 
    emphasizeSocialMediaLink: function (e) { 
     alert('emphasize SM'); 
    }, 

    // Works fine 
    resetSocialMediaLink: function (e) { 
     alert('reset SM'); 
    }, 

前兩個事件不火，但最後2做工精細。我可以看到的唯一區別是，選擇指定的子元素（如：#socialMediaContainer .links li，但我不知道爲什麼，這將使任何區別

相關的HTML源代碼如下：。

<div id="socialMediaContainer"> 
     <ul class="links"> 
      <li><a href="#"><img src="/Content/images/socialmedia/linkedin.png" alt="LinkedIn" /></a></li> 
      <li><a href="#"><img src="/Content/images/socialmedia/tumblr.png" alt="Tumblr" /></a></li> 
      <li><a href="#"><img src="/Content/images/socialmedia/twitter.png" alt="Twitter" /></a></li> 
      <li><a href="#"><img src="/Content/images/socialmedia/googleplus.png" alt="Google+" /></a></li> 
      <li><a href="#"><img src="/Content/images/socialmedia/facebook.png" alt="Facebook" /></a></li> 
     </ul> 
     <div class="shareTab"> 
      <div>Share</div> 
     </div> 
    </div> 

如果我添加一個initialize()方法這一觀點，併成立了事件處理程序出現，他們很好地工作：

initialize: function() { 
     $('#socialMediaContainer').on('mouseenter', this.showSocialMediaLinks); 
     // etc... 
    }, 

但理想的我希望能夠只使用哈希事件的一致性所有。想法爲什麼那些前2個事件似乎沒有得到bou nd，但第二個2呢？對於它的價值，我也嘗試使用this.showSocialMediaLinks作爲事件散列值以及字符串'showSocialMediaLinks'。

我想我已經包含了上述所有相關信息，請讓我知道如果您需要任何其他診斷。謝謝。

Answer 1

我假設你通過將它附加到#socialMediaContainer div來初始化你的視圖。例如：

var myView = new MyView({ 
    el: $('#socialMediaContainer') 
}); 

通過這樣做，您的所有活動都將相對於#socialMediaContainer div。

爲了解決這個問題，你可以這樣做：

events: { 
    'mouseenter': 'showSocialMediaLinks', 
    'mouseleave': 'hideSocialMediaLinks', 
    'mouseenter .links li': 'emphasizeSocialMediaLink', 
    'mouseleave .links li': 'resetSocialMediaLink', 
}, 

至於下面的jQuery的事件：

$('#socialMediaContainer').on('mouseenter', this.showSocialMediaLinks); 

這工作，因爲它相對於#socialMediaContainer DIV是沒有的。它基本上是全球性的。

對我來說，怪異的是，當你這樣做的最後兩個事件的工作：

events: { 
    'mouseenter #socialMediaContainer .links li': 'emphasizeSocialMediaLink', 
    'mouseleave #socialMediaContainer .links li': 'resetSocialMediaLink', 
}, 

我真的不知道爲什麼會工作。但我測試了它併爲我工作。可能是一個錯誤？