js事件 -- addEventListener事件

时间：2021-06-22 04:35:53

百度上很多篇文章讲解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>

 

标签：

相关文章