JS的DOM注册事件和删除事件
作者:互联网
1.注册事件(绑定事件)
1.1注册事件概述
- 给元素添加事件,称为注册事件或者绑定事件。
- 注册事件有两种方式:传统方式和方法监听注册方式
传统注册方式
利用on开头的事件onclick
btn.onclick = function() {}
特点:注册事件的唯一性
同一个元素同一个事件只能设置-个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
w3c标准推荐方式
addEventListener()它是一一个方法
IE9之前的IE不支持此方法,可使用attachEvent0代替
特点:同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行
1.2 addEventListener事件监听方式
注意:
(1) 里面的事件类型是字符串必定加引号而且不带on
(2)同一个元素同一个事件可以添加多个侦听器(事件处理程序)
1.4注册事件兼容性解决方案
兼容性处理的原则:首先照顾大多数浏览器,在处理特殊浏览器
2.删除事件(解绑)
2.1删除事件的方式
1.传统注册方式
eventTarget.onclick = null;
2.方法监听注册方式
①eventTarget . remove EventListener (type,listener [,useCapture]) ;
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function(){
alert(11);
//1.传统方式删除事件
divs[0].onclick = null;
}
divs[1].addEventListener('click',fn)//里面的fn 不需要调用加小括号
function fn(){
alert(22);
divs[1].removeEventListener('click',fn);
}
//3.
divs[2].attachEvent('onclick',fn1)
function fn1(){
alert(33);
divs[2].removeEventListener('onclick',fn1);
}
</script>
2.2删除事件兼容性解决方案
标签:function,注册,方式,DOM,JS,事件,onclick,divs 来源: https://blog.csdn.net/gyqailxj/article/details/122506722