关于js中对事件绑定与普通事件的理解

 

　　普通事件指的是可以用来注册的事件；

　　事件绑定是指把事件注册到具体的元素之上。

 

通俗点说：

　　普通事件：给html元素添加一个特定的属性(如：onclick)；

　　事件绑定：js代码中通过标记（id  tag class）获取元素，给元素添加特定的方法(如：onclick)；

 

扩展：事件监听addEventListener事件可以绑定多次事件，并进行触发

div1.onclick = function(){};


<button onmouseover = "  "></button>

 

　　1、如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面的绑定
　　2、不支持DOM事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段

addEventListener
　　⦁ 如果说给同一个元素绑定了两次或者多次相同类型的事件，所以的绑定将会依次触发
　　⦁ 支持DOM事件流的
　　⦁ 进行事件绑定传参不需要on (在我们前端)

 

addEventListener(“click”,function(){},true);   //此时的事件就是在事件冒泡阶段执行

 

兼容性处理

ie9开始   到ie11 edge：addEventListener

ie9以前：attachEvent/detachEvent

　　⦁ 进行事件类型传参需要带上on前缀
　　⦁ 这种方式只支持事件冒泡，不支持事件捕获

 

比较attachEvent 和 addEventListener:

• attachEvent只支持事件冒泡  addEventListener既支持事件冒泡，也支持事件捕获
• 参数： attachEvent事件类型需要on前缀， addEventListener事件类型不需要on前缀
• 如果使用attachEvent对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序的相反顺序进行触发；如果使用addEventListener对一个元素的目标阶段绑定多次事件，那么会按照绑定顺序进行触发