Question

我有一个Backbone.Marionette项目视图。它呈现项目列表。每当有人滚动列表时，我想听scoll事件。我以为这会起作用：

$(".nexthotel").click(function(){
var numhotels= $("#hotels > div").length;
for(i = 0; i < numhotels; i++){
    if($("#hotel"+i).is(":visible")){
       var x = i + 1;
       $("#hotel"+i).hide();
       $("#hotel"+x).show();
       $(".slidehotels[target=" + x + "]").css({"background-color":"cadetblue","color":"#FFF","border":"2px solid cadetblue"});

但它不捕获滚动事件。但是，当我这样做时：

events: {
    'scroll ul': 'filterInteraction'
},

filterInteraction: function(){
    console.log('in filterInteraction ');
}

这将捕获滚动事件。有什么不同？两者似乎都在做同样的事情......

Answer 1

使用onRender，您可以在每个渲染上设置事件，这是我看到的唯一区别。所以在我看来，第一种解决方案会有更好的表现。

正如anonymousday所说，第一个选项是实现事件委托，这意味着事件委托允许我们将单个事件监听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代是否为现在存在或将来添加。 http://learn.jquery.com/events/event-delegation/

Answer 2

我们有4个事件处理程序：

滚动
- for root div：el
- for ul
点击
- for root div：el
- for ul

'click'事件气泡所以在事件爆发时div #root接收它并且可以处理它，但滚动事件不会冒泡所以我们无法从#root div处理它

在下一个示例中，我们为每个事件都有相同的代码。

如果我们点击'ul'，我们会有一个日志click for ul和一个日志click for #root 因为点击事件'bubble'/爬上DOM树直到#root。
如果我们滚动#root，我们会有一个日志scroll for root，因为我们直接从它捕获事件但我们不能使用事件委托来处理来自ul的滚动，因为滚动事件不会'冒泡'/爬上DOM树。

scroll on w3 site

var dbg = $('#dbg')
var log = function(val){
  dbg.append('<div>' + val + '</div>')
  .scrollTop(99999);
};
$('button').click(function(){dbg.empty() });



var i=0;
var MyView = Backbone.View.extend({
  
  events : {
    
    'click' : 'elClick' ,
    'scroll' :'elScroll' ,
    
    'click ul' : 'ulClick' ,
    'scroll ul' :'ulScroll' ,

  } ,
  elScroll : function(){ log('scroll for #root : '  + (i++)); } ,
  ulScroll : function(){ log('scroll for ul : '     + (i++)); } ,
  elClick  : function(){ log('clicked on #root :  ' + (i++)); } ,
  ulClick  : function(){ log('clicked on ul  : '    + (i++)); } ,
}); 

myView = new MyView({el : $('#root') });

#dbg{
  position: aboslute;
  border : solid 1px #EEE;
  top : 0;
  left : 0;
  right :0;
  height : 150px;
  min-height : 150px;
  overflow : auto;
  bottom : auto;
}
#dbg:hover{
    bottom : 0;
    height : auto;
}

#root{
    position: aboslute;
  border : solid 1px #EEE;
  top : 30px;
  left : 0;
  right :0;
  height : 150px;
  overflow : auto
  }
ul,li {
  border:solid 1px #CCC;
  list-style : none;
  padding : 0px;
  margin : 1px;
  cursor : pointer;
  }
ul{
  height : 200px;
  overflow : auto; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>

<div id='dbg'>debug : </div>
<div id='root'>
  <ul>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    <li>A</li>
    
  </ul>
  
</div><button>clear debug</button>

在Backbone中捕获滚动事件

2 个答案: