js中addeventlistener的作用,把attachEvent改为addEventListener

　　attachEvent和addEventListener有什么区别？摘要如下：

　　首先，适配的浏览器版本不同

　　AttachEvent方法适用于IE addEventListener方法适用于FF。

　　第二，针对不同的事件。

　　attachEvent中的事件已打开，但addEventListener中的事件未打开。

　　第三，参数个数不同。

　　attachEvent方法有两个参数：第一个参数是事件名称，第二个参数是接收事件处理的函数；AddEventListener有三个参数：第一个参数表示事件名称(不带on，比如‘click’)；第二个参数指示接收事件处理的函数；第三个参数是一个布尔值，通常为false。

　　第三个参数叫做useCapture，是一个布尔值，即真或假。如果为真，则意味着浏览器将使用捕获方法。如果是假的，那就是冒泡，只有在一定条件下才会有影响。通常建议为false，但是会有影响的情况是目标元素有祖先元素，并且也有相同的事件对应函数。我觉得看图会更清楚。

　　如此图所示，我的示例有两层div元素，这两层都设置了click事件。一般来说，如果我点击内层的蓝色元素，不仅会触发蓝色元素的click事件，还会同时触发红色元素的click事件，而参数useCapture控制了此时两个click事件的先后顺序。如果为假，则使用冒泡。这是一个由内向外的过程，所以首先执行蓝色元素的click事件，然后执行红色元素的click事件。如果是真的，那就是俘虏。与冒泡相反，首先执行红色元素的click事件，然后执行蓝色元素的click事件。附上两个例子，抓拍和冒泡。两个文件唯一的区别就是这个参数不一样，可以发现事件发生的顺序不一样。

　　如果不同层的元素使用不同的useCapture会怎样？即设置为capture的事件会先从最外面的元素开始搜索到目标元素，在目标元素执行完目标元素的事件后，再搜索出设置为bubbling的事件。

　　第四，执行事件的优先级不同。

　　div id=outDiv

　　div id=middleDiv

　　请在这里点击鼠标。/div

　　/div

　　div id=info /div

　　var outDiv=document . getelementbyid( outDiv )；

　　var middle div=document . getelementbyid( middle div )；

　　var inDiv=document . getelementbyid( inDiv )；

　　var info=document . getelementbyid( info )；

　　outDiv.addEventListener(click ，function(){ info . innerhtml= outDiv br }，false)；

　　middle div . addevent listener( click ，function(){ info . innerhtml= middle div br }，false)；

　　inDiv.addEventListener(click ，function(){ info . innerhtml= inDiv br }，false)；

　　以上是我们测试的代码，触发的顺序是根据info的显示来决定的。addEventListener有三个，useCapture可选值为true和false，所以可以得到2*2*2，8个不同的程序。

　　全假时，触发顺序为：inDiv，middleDiv，outDiv；

　　当全部为真时，触发序列为：outDiv，middleDiv，inDiv；

　　当outDiv为真，其他为假时，触发顺序为：outDiv，inDiv，middleDiv；

　　当middleDiv为真，其他为假时，触发顺序为：middleDiv，inDiv，outDiv；

　　……

　　最后得出以下结论：

　　true的触发序列总是在false之前；

　　如果都为真，外层的触发先于内层的触发；

　　如果都为假，内层会在外层之前触发。

　　提供了以下代码，您可以更改true和false值来测试它。注意，它不适用于IE。

　　动词（verb的缩写）不同的参考文献

　　AttachEvent-bound函数，不绑定此引用。

　　函数doIt(){ alert(this)；}然后我们在页面中处理如下：

　　先做一个按钮：button id=btn button /button，然后为这个按钮绑定事件onclick如下：script language= JavaScript type= text/JavaScript document . getelementbyid( BTN 4 )。AttachEvent (onclick ，doit)；/脚本

　　经过这样的处理后，这个in doIt方法不代表button，而是使用

　　document.getElementById(btn4 ).onclick=必须时这一点指向的就是按钮的代表的按钮(按钮)了，

　　还有就是

　　document.getElementById(btn4 ).addEventListener(click，dostomethodology，false)；这样也可以把这一点绑定进去

　　最后写一个兼容所有浏览器的监听事件方法如下：

　　//兼容所有浏览器的系好安全带方法

　　如果(!窗户。附加窗口。添加事件侦听器

　　{

　　窗户。原型。attachevent=html文档。原型。附加ent=窗口。原型。附上

　　html元素。原型。attach ent=function(en、func、cancelBubble)

　　{

　　var cb=cancelBubble？真—假；