addEventListener和attachEvent以及事件句柄绑定的区别

这几天对js的dom事件绑定回顾了一下

首先说一下addEventListener和attachEvent的区别

1.语法不同

2.适用的范围不同，addEventListener适用于遵循dom标准的浏览器内使用如FF，而attachEvent则是在ie中使用的

3.参数不一样

4.绑定多个相同事件的执行顺序不一样

addEventListener语法

target.addEventListener(type, listener, useCapture);

target 文档节点、document、window 或 XMLHttpRequest。

type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。

listener绑定要执行的函数

useCapture是否使用捕捉，一般用false

attachEvent语法

target.attachEvent(type,listener);

type字符串，事件，含“on”如“onclick”

listener绑定要执行的函数

当绑定多个执行函数时用两种方式的执行顺序

使用addEventListener时

target.addEventListener("click",method1,false);

target.addEventListener("click",method2,false);

target.addEventListener("click",method3,false);

当click触发时执行的顺序是method1-->method2-->method3

使用attachEvent时

target.attachEvent("onclick",method1);

target.attachEvent("onclick",method2);

target.attachEvent("onclick",method3);

当click触发时执行的顺序是method3-->method2-->method1

用些人喜欢用动态句柄绑定绑定

onclick在一般的浏览器内都适用

只是在使用的时候，如：

target.onclick=method1;

target.onclick=method2;

target.onlcik=method3;

当click触发时只会运行method3;相当于method2覆盖method1，method3覆盖了method2，所以click触发时只会运行method3