DOM事件高级①(注册、删除事件)

DOM事件高级①(注册、删除事件)

文章目录

​​注册事件(绑定事件)​​

​​注册事件概述​​​​addEventListener 事件监听方式​​​​attachEvent 事件监听方式​​​​注册事件兼容性解决方案​​

​​删除事件(解绑事件)​​

​​删除事件的方式​​​​删除事件兼容性解决方案​​

注册事件(绑定事件)

注册事件概述

给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：

传统方式方法监听注册方式

①传统注册方式

利用 on 开头的事件 onclickbtn.onclick = function() {}特点： 注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

②方法监听注册方式

w3c 标准 推荐方式addEventListener() 它是一个方法IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替特点：同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

addEventListener 事件监听方式

语法：

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

type：事件类型字符串，比如 click 、mouseover ，注意这里不要带onlistener：事件处理函数，事件发生时，会调用该监听函数useCapture：可选参数，是一个布尔值，默认是 false。

例如：

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 oncallback： 事件处理函数，当目标触发事件时回调函数被调用

注意：IE8 及早期版本支持

例如：

[2].attachEvent('onclick', function() { alert(11); })

注册事件兼容性解决方案

function addEventListener(element, eventName,) { // 判断当前浏览器是否支持 addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; }

兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器

删除事件(解绑事件)

删除事件的方式

传统注册方式

eventTarget.onclick = null;

方法监听注册方式

① eventTarget.removeEventListener(type, listener[, useCapture]); ② eventTarget.detachEvent(eventNameWithOn, callback);

例如： 场景：触发一个事件之后，再触发不会有相应

注意：删除事件的时候，不要使用匿名函数，否则不方便删除，建议可以把方法单独给拿出来。

删除事件兼容性解决方案

function removeEventListener(element, eventName,) { // 判断当前浏览器是否支持 removeEventListener 方法 if (element.removeEventListener) { element.removeEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。