132、js中事件绑定的几种方式

一、事件有三个阶段：

1. 事件捕获阶段-----由外向里
2. 事件目标阶段-----最开始选中的那个，但是不一定是最先出现的，根据是那个阶段而定
3. 事件冒泡阶段-----由里向外

二、绑定方式有哪些？

DOM和jQuery当中都有

• DOM中：

（1）onclick。 对象.on事件名字=事件处理函数----------如果是多个相同事件注册用这种方式，最后一个执行，之前的会被覆盖掉；

my$("ID名字").οnclick=function( ){ };

（2）对象.addEventListener("没有on的事件名字"，事件处理函数，冒泡传递false/捕获传递true)；

my$("ID名字").addEventListener("click",function( ){ },false);

（3）对象.attachEvent("有on的事件的名字"，事件处理函数)；

my$("ID名字").attachEvent("onclick",function( ){ });

三、绑定事件的区别： 

• addEventListener 和 onclick的区别

（1）一个onclick处理器在同一时间只能指向唯一的对象。因此就算对于同一对象绑定了多次，但是只有最后的一次绑定生效。下图，虽然绑定了两次，只会弹出一个弹出框：‘我是click2’；

 

（2）addEventListener对于同一对象两次绑定的事件，都能够成功运行，也就是前后弹出 ‘我是addEvent1’ '我是'addEvent2'。故对于一个可以绑定的事件对象，想绑定的多次事件都能运行，选用addEventListener。

（3）addEventListener对任何DOM都是有效的，而onclick仅限于HTML；

（4）addEventListener可以控制listener的触发阶段（捕获/冒泡）；
 

• addEventListener 和 attachEvent 的区别

（1）相同点：都可以为元素绑定事件

（2）不同点：

• 方法名不一样
• 参数个数不一样addEventListener三个参数，attachEvent两个参数
• addEventListener 谷歌、火狐都支持，IE8不支持 ；attachEvent 谷歌火狐都不支持，IE8支持
• this不同，addEventListener 中的this是当前绑定事件的对象 ， attachEvent中的this指的是window
• addEventListener中的事件的类型(事件的名字)没有on ，attachEvent 中的事件的类型(事件的名字)有on