addEventListener方法和function（event）方法问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jquery</li> <li>HTML5</li> <li>CSS3</li> <li>ES6</li> </ul> <script type="text/javascript"> var lis = document.querySelectorAll("li") //function（event）方法/* for(let i = 0;i<lis.length;i++) { let t=lis[i].innerHTML; lis[i].style.cursor='pointer' lis[i].onmouseenter=function(e){ e.target.style.color='red'; e.target.style.fontSize='20px'; e.target.innerHTML=t+'我是第'+(i+1)+'个'; }; lis[i].onmouseleave=function(e){ e.target.style.color=''; e.target.style.fontSize=''; e.target.innerHTML=t; } }*///addEventListener方法 for(let i = 0;i<lis.length;i++) { let t=lis[i].innerHTML; lis[i].style.cursor='pointer' lis[i].addEventListener('mouseenter',function(){ lis[i].style.color='red'; lis[i].style.fontSize='20px'; lis[i].innerHTML=t+'我是第'+(i+1)+'个'; }, false), lis[i].addEventListener('mouseleave',function(){ lis[i].style.color=''; lis[i].style.fontSize=''; lis[i].innerHTML=t; }, false) } </script></body></html> |
问题描述：
请老师解答一下，这两种方法有什么区别？还有什么时候使用?
我只是会用，但是不是很理解这两种方法。
15
收起
正在回答
1回答
同学你好，解答如下：
首先它们一个是DOM2级事件，一个是DOM0级事件（addEventListener为DOM2级事件绑定，onxxxx为DOM0级事件绑定。）
1、addEventListener相当于是onxxx的“升级”版。
2、addEventListener可以给同一个DOM多次绑定事件。而onxxx同一个元素只能绑定一个事件，如多次给同一个DOM绑定多次事件，最后面的事件会覆盖前面的事件。
3、addEventListener有三个参数，同时它可以处理冒泡与捕获。
4、在给DOM事件做绑定的时候两者的区别addEventListener可以不需要写on，而DOM0级事件如onclick中的on是不能省略的。
5、对于两者的移除事件，addEventListener有自己的移除方式--> removeListener我们俗称它是解绑，DOM0级如onclick直接将其指针指向null即可-->document.onmouseover= null;
6、关于兼容性问题在IE6、7、8版本中addEventListener是无效的。
7、如果涉及到使用原生JS的话，我主观更建议使用DOM2级addEventListener去做绑定。因为它更加灵活好用。
暂时先总结这些，其余的同学可以自行去搜索一下两者区别的帖子或看看书籍补充。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧