addEventListener方法和function（event）方法问题
<!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积分~
来为老师/同学的回答评分吧
0 星