jQuery的事件系统

[24wangchen]

概述

事件系统是一个系统中很重要的部分，用于相应用户的各种交互行为。 浏览器提供了3种API

1. 写在元素标签内
2. elem.onXXX = function
3. 绑定事件。存在两套API

• IE与Opera
  • 绑定事件 elem.attachEvent( 'on' + type, callback )
  • 卸载事件 elem.detachEvent( 'on' + type, callback )
  • 创建事件 document.createEventObject()
  • 派发事件 elem.fireEvent( type, event )
• W3C
  • 绑定事件 elem.addEventListener( type, callback, [useCapture] )
  • 卸载事件 elem.removeEventListener( type, callback, [useCapture] )
  • 创建事件 elem.createEvent( types )
  • 初始化事件 event.initEvent()
  • 派发事件 elem.dispatchEvent( event )

jQuery的事件绑定

jQuery的事件绑定有多种方式，以click事件为例

• click
• bind
• delegate
• on

<ul id="test">
    <li></li>
    <li></li>
    <li></li>
</ul>

$('li').click( function(){ } )
$('li').bind( 'click', function(){ } )
$('#test').delegate( 'li', 'click', function(){ } )
$('#test').on( 'click', 'li', function(){ } )

以上四种绑定方式，在底层中都是调用的this.on

jQuery的事件流程图

element.on( 'node', 'click', function(){ } )

• 绑定阶段
  • jQuery.fn.on 绑定事件入口
  • jQuery.event.add 给选中元素注册事件
• 执行阶段
  • jQuery.event.dispatch 分派事件处理函数
  • jQuery.event.fix 修正event对象
  • jQuery.event.handlers 组装事件处理队列