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
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？真—假；
这个。addevent侦听器(en。托尔鲍尔案例(1990年).substr(2)、func、CB；
}:
}
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。