JavaScript注册、删除事件的两种方式--传统注册方式、方法监听注册方式
程序员文章站
2022-03-07 22:03:20
JavaScript注册事件的两种方式–传统注册方式、方法监听注册方式注册事件有两种方式：传统方式和方法监听注册方式。（还有一种IE9以前支持的方式attachEvent注册事件，现在不常用）传统注册方式利用on开头的事件，如onclick。btn.onclick = function(){}传统事件注册具有唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注...
JavaScript注册事件的两种方式–传统注册方式、方法监听注册方式
注册事件有两种方式：传统方式和方法监听注册方式。（还有一种IE9以前支持的方式attachEvent注册事件，现在不常用）
传统注册方式
利用on开头的事件，如onclick。
<button onclick = “alert(‘123’)”></button>
btn.onclick = function(){}
传统事件注册具有唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
addEventListener()；是一个方法。同一个元素同一个事件可以之策多个监听器，会按照注册的顺序依次执行。
eventTarget.addEventListener(type,listener[,useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
三个参数：
type：事件类型字符串，比如 click、mouseover。这里不需要加on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。
<body>
<button>
传统注册事件
</button>
<button>
事件监听注册事件
</button>
<script>
var btns = document.querySelectorAll('button');
//传统注册事件
btns[0].onclick = function(){
alert('hi');
}
btns[0].onclick = function(){
alert('传统注册事件');
}
//运行程序，点击传统注册事件按钮，弹出提示框：传统注册事件。第一个hi提示框被覆盖，不会弹出。
//事件侦听注册事件
btns[1].addEventListener('click',function(){
alert('事件监听注册事件')；
})
btns[1].addEventListener('click',function(){
alert('事件监听注册事件2')；
})
//运行程序，点击事件监听注册事件按钮，弹出提示框：事件监听注册事件，点击确定后，再次弹出“事件监听注册事件2”的提示框
//在事件侦听注册事件的方法中事件类型要加引号并且没有on
</script>
</body>
JavaScript删除事件(解绑事件)
传统方式删除事件
evenTarget.onclick. = null;
方法监听方式删除事件
evenTarget.removeEventListener()
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = fuction(){
alert(123);
//每次点击div1都会弹出来一个提示框123，想要第二次点击时不弹出提示框。
//传统方式解绑事件
divs[0].onclick = null;
}
//将fn函数绑定到点击事件中，里面的fn不需要加小括号
divs[1].addEventListener('click',fn);
//fn函数的内容
function fn (){
alert(456);
//每次点击div2都会弹出来一个提示框456，想要第二次点击时不弹出提示框。
//方法监听注册方式
//因为要考虑到解绑，所以在前面绑定的时候不使用匿名函数的绑定方式。
diva[1].removeEventListener('click',fn)
}
})
</script>
</body>
本文地址：https://blog.csdn.net/weixin_42579348/article/details/110121039