on方法使用注意事项

on(eventType,[childSelector],[data],fn)

采用事件委托机制绑定事件，好处是子元素动态加入时无需再次绑定。

on方法可以传入childSelector指定添加事件处理函数的具体子元素，还可以传入对象格式的数据data，fn函数内部通过event.data.XXX获取具体参数。传入事件处理函数的data需要在事件绑定时就确定好，不同于trigger('eventType',[data])，tirgger方法中传入的data（对象或数组形式）是事件发生时才计算的值。

如果同一个事件处理程序被多次绑定给同一个元素，触发时就会执行多遍。所以绑定之前，需要先解绑之前的相同事件:

　　$(“selector”).off("click.xxx").on('click.xxx',function(){…});

如要在同一个元素上绑定不同事件处理函数，可以用事件的命名空间加以区分：click.forSpan、click.forDiv。

delegate()的源码是调用on()方法,只不过参数顺序变了，所以统一用on()。

事件触发顺序：

target:The DOM element that initiated the event,是事件的目标，对应冒泡阶段最开始的那个元素，不会变;currentTarget：the current DOM element within the event bubbling phase，冒泡过程中事件处理函数当前正在处理事件的那个元素，会动态变化，通常和事件处理函数中的this相等;delegateTarget:the element where the currently-called jQuery event handler was attached，不会变。 

$( "p" ).click(function( event ) {
    alert( event.currentTarget === this ); // true
});

$( ".box" ).on( "click", "button", function( event ) {
//点击子元素改变父元素（绑定事件处理函数）的背景
  $( event.delegateTarget ).css( "background-color", "red" );
});

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $( this ).on方法不加selector，this则为代理元素。

on方法利用了事件冒泡机制，事件会从事件源一直冒泡传递到document，并触发相应元素的事件处理函数（若有）。

事件处理队列：从触发事件的元素开始，遍历至delegateTarget，查找childSelector所指定的元素节点，并在事件处理队列handlerQueue中压入事件处理函数，最后将delegateTarget元素直接绑定的事件处理也压入队列（委托事件先于直接绑定的）。

on方法的冒泡过程中，具有事件处理函数的是delegateTarget元素而不是childSelector元素。

  $("div").on('click','span',function(event){
　　　　　//event.stopPropagation();
    　　alert("The span element was clicked.");
  });
  $("p").click(function(event){
    　　alert("The p element was clicked.");
  });
  $("div").click(function(){
    　　alert("The div element was clicked.");
  });

点击span元素时，span元素上没有绑定事件处理函数，冒泡传递到P元素，P元素有直接绑定的事件处理函数，最先弹出P；然后传递到最外层div元素，div元素有事件委托，jQuery会从target (span)遍历到delegateTarget (div)，查找childSelector节点，并压入事件处理队列中。最后压入delegateTarget (div)元素直接绑定的事件处理函数。所以会弹出Span后弹出Div。

另外上述注释的stoppropagation()方法，只能等事件传递到div元素后阻止后续处理函数被执行，并不能提前阻止之前的事件处理函数被执行，有点z-index的分层感觉。