DOM0级事件误区－addEventListener

百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖

概念如下：

　　同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数

 

其实不然，官方讲解：添加的事件不会覆盖已存在的事件。

 

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>菜鸟教程(runoob.com)</title>
</head>
<body>
　　<p>该实例使用 addEventListener() 方法在同一个按钮添加两个点击事件。</p>
　　<button id="myBtn">点我</button>
<script>
　　var x = document.getElementById("myBtn");
　　x.addEventListener("click", myFunction);
　　x.addEventListener("click", myFunction);
　　x.addEventListener("click", someOtherFunction);
　　function myFunction(){
    　　alert ("Hello World!")
　　}
　　/**
　　 * 如果外部有多个相同的函数名，调用相同的函数名，在外部会直接覆盖，
 　　* 但是addEventListener事件调用同一个函数名，添加的事件不会覆盖已存在的事件，无论后续多次执行也不会被覆盖
 　　*/
　　function myFunction(){
    　　alert ("Helle World!")
　　}
　　function someOtherFunction(){ 
　　　　alert ("该函数也将被执行!") 
　　} 
</script> ​ 
</body> 
</html>

 

posted @ 2019-05-08 12:14  席超  阅读(706)  评论(0)  编辑  收藏  举报