什么是事件冒泡和事件捕获、事件委托，他们的作用

JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。

这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：

（1）在html代码中直接指定属性值：

（2）在js代码中为　document.getElementsById(“demo”).onclick = doSomeTing()

优点：所有浏览器都兼容

缺点：1）逻辑与显示没有分离；2）相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的，如：a.onclick = func1; a.onclick = func2;将只会执行func2中的内容。3）无法通过事件的冒泡、委托等机制（后面会讲到）完成更多事情。

因为这些缺点，虽然原始事件类型兼容所有浏览器，但仍不推荐使用。

此模型是W3C制定的标准模型，现代浏览器（IE6~8除外）都已经遵循这个规范。W3C制定的事件模型中，一次事件的发生包含三个过程：

(1).事件捕获阶段，(2).事件目标阶段，(3).事件冒泡阶段。如下图所示

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：当某个元素的某类型事件被触发时（如onclick），它父级的同类型事件也会被触发，它的父级的父级同类型事件也会被触发，以此类推，一直触发到根元素。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

所有的事件类型都会经历事件捕获但是只有部分事件会经历事件冒泡阶段,例如submit事件就不会被冒泡。

事件的传播是可以阻止的：

在W3c中，非 IE 使用stopPropagation() 方法

在IE下使用cancelBubble=true 方法

兼容性写法封装:

标准的事件监听器该如何绑定?

监听器的增加：addEventListener(“eventType”,“handler”,“true|false”);

监听器的解除： removeEventListner(“eventType”,“handler”,“true!false”);

监听器的增加： attachEvent( “eventType”,“handler”)

监听器的解除： detachEvent(“eventType”,“handler” )

IE的事件模型已经可以解决原始模型的三个缺点，但其自己的缺点就是兼容性，只有IE系列浏览器才可以这样写。

以上就是3种事件模型，在我们写代码的时候，为了兼容ie，通常使用以下写法：

总结：

1、鼠标相关的事件

​ click： 当用户单击鼠标按钮或按下回车键时触发 ​ dblclick： 当用户双击主鼠标按钮时触发。 ​ mousedown： 当用户按下了鼠标还未弹起时触发。 ​ mouseup： 当用户释放鼠标按钮时触发。

​ mouseover： 当鼠标移到某个元素上方时触发，

​ mouseout： 当鼠标移出某个元素上方时触发，

​ mouseenter：当鼠标移到某个元素上方时触发，

​ mouseleave：当鼠标移出某个元素上方时触发，

​ mousemove： 当鼠标指针在元素上移动时触发。

​

​ 注：

mouseover和mouseenter的区别：

mouseover，mouseout：当从父元素进入到子元素区域时，会触发父元素的离开事件（mouseout），同时又触发了mouseover事件

mouseenter，mouseleave：当从父元素进入到子元素区域时，不会触发父元素的离开事件（mouseleave）

2、键盘相关的事件

​

​ keydown： 当用户按下键盘上任意键触发，如果按住不放，会重复触发（不停地触发）。

​ keyup： 当用户抬起了（松开了）键盘上的键，触发

​ keypress： 当用户按下键盘上的字符键触发，如果按住不放，会重复触发。 ​

3、window对象的相关事件：

load： 当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。 unload：当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架集上触发。 （用的非常非常少） scroll： 当用户滚动带滚动条的元素时触发。 resize： 当窗口或框架的大小变化时在 window 或框架上触发。

4、表单相关的事件

blur： 当页面或元素失去焦点时在 window 及相关元素上触发。

focus： 当页面或者元素获得焦点时在 window 及相关元素上面触发。

select： 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。

change：当下拉框的选项发生改变，或者当文本框(input 或 textarea)内容改变且失去焦点后（并且内容有改变）触发。

submit： 当用户点击提交按钮在元素上触发。

reset： 当用户点击重置按钮在元素上触发。

1、事件对象

​ 事件对象 就是保存着事件相关信息的对象。当事件发生时，会自动产生事件对象（不需要new），事件对象中包含着：事件源（发生事件的dom元素），点击是鼠标的哪个键，鼠标的当前位置（事件发生的位置）等等信息。

2、事件源：

​ 发生事件的DOM元素（按钮，文本框，div，下拉框）。在事件处理函数里可以用this表示。

3、事件对象的获取

​ 事件对象是在事件发生后才有的。

​ dom对象.onclick = function(event){

​ //event参数就是事件对象，事件对象必须写在事件处理函数里。

​ 为了考虑到低版本的IE浏览器，需要兼容性写法↓

​ var e = event || window.event;

​ }

1、button: 记录着鼠标按下的是哪个键：

​ 0：左键

​ 1：中键（滚轮）

​ 2：右键

2、鼠标位置相关的属性：

clientX clientY 事件距离可视区域左边上边的X，Y坐标 pageX pageY 原点位置，整个页面的左上角（带滚动高度） screenX screenY(用得少了) 事件距离整个屏幕左边上边的X，Y坐标

3、键盘相关的属性：

keyCode：保存着用户的按键编码；兼容性写法 var code = 事件对象.which || 事件对象.keyCode

ctrlKey：是否按照ctrl键，true：按下了；false：没有按下

shiftKey：是否按照shift键，true：按下了；false：没有按下

altKey：是否按照alt键，true：按下了；false：没有按下

metaKey：是否按照window键，true：按下了；false：没有按下

事件对象.target ：发生事件的事件源

事件对象.srcElement： 是指向触发事件的元素，它是什么就有什么样的属性

事件对象.currentTarget： 是当前的事件源，会随事件流的流动（捕获、冒泡）而发生变化。

event.target与event.currentTarget有什么不同？

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

1、浏览器的默认行为

​ 浏览器的默认行为就是不用写任何代码，浏览器给网页上增加的默认效果，如：任何网页都有右键菜单

2、如何阻止

​ 非IE：

​ 事件对象的方法：preventDefault();

​ IE：

​ 事件对象的属性：returnValue

​ 第三种做法：在事件处理函数里，直接使用return false就行。

​ 如下是兼容性写法：

举个例子，阻止鼠标右键的菜单功能

1、事件委托的概念：

事件委托 也叫事件代理，在 传统的事件处理中，我们为每一个需要触发事件的元素添加事件处理器，但是这种方法将可能会导致内存泄露或者性能下降（特别是通过ajax获取数据后重复绑定事件，总之，越频繁风险越大）。事件代理在js中是一个非常有用但对初学者稍难理解的功能，我们将事件处理器绑定到一个父级元素上，避免了频繁的绑定多个子级元素,依靠事件冒泡机制与事件捕获机制，子级元素的事件将委托给父级元素。

2、事件委托的原理：

​ 利用事件冒泡，和事件对象的target属性完成

3、优点：

1） 针对新增加的子元素，事件依然有效 2 ）最终编译后的代码量小。

4、实例

假设有一个列表， 列表中的每一个li 都需要绑定某个事件处理函数 ，做法如下代码。↓

一、用传统的做法给每一个li绑定事件