事件绑定

• 要想让 javascript 对用户的操作作出响应，首先要对 dom 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称

• 在javascript中，有三种常用的绑定事件的方法
• 在dom元素中直接绑定；
• 在javascript代码中绑定；
• 绑定事件监听函数

在dom中直接绑定事件

在javascript代码中绑定事件

• 在javascript代码中（即script标签内）绑定事件可以使javascript代码与HTML标签分离，文档结构清晰，便于管理和开发

使用事件监听绑定事件

• 关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段

• 起初Netscape制定了javascript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范

• 语法

• event : （必需）事件名，支持所有dom事件。

• function：（必需）指定要事件触发时执行的函数。

• useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false

• 注： IE8 以下不支持

• 语法：

• event：（必需）事件类型。需加“on“，例如：onclick。

• function：（必需）指定要事件触发时执行的函数

事件监听的优点

• 可以绑定多个事件

• 可以解除相应的绑定

• 封装事件监听

事件委托

• 事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果

事件委托优点

• 提高javascript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用

• 传统写法

• 事件委托

• 动态的添加dom元素，不需要因为元素的改动而修改事件绑定

• 传统写法

• 点击item1到item3都有事件响应，但是点击item4时，没有事件响应。说明传统的事件绑定无法对动态添加的元素而动态的添加事件。

• 事件委托

• 当点击item4时，item4有事件响应。说明事件委托可以为新添加的dom元素动态的添加事件