js事件 -- 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>

猜你喜欢

转载自www.cnblogs.com/CCxi/p/10831089.html