简介

由于事件在冒泡阶段向上传播到父节点，因此可以把子节点监听的事件在父节点的监听，由父节点的监听函数统一处理多个子元素的的事件，这种方法就叫做事件的代理，处理如下：

var ul = document.querySelector('ul');ul.addEventListener('click', function (event) {if (event.target.tagName.toLowerCase() === 'li') {// some code}
});

这样做的好处：

只需在父节点定义一个监听函数，就可以统一处理子节点的事件了；
动态添加子节点，也可以监听到；

下面呢？我们就手动实现下事件代理

实现步骤

创建一个Delegator类，定义一个on方法（监听），再定义一个destroy方式（用于注销事件）

!function (root, doc) {class Delegator {/**@param 顶级选择器（代理者）*/constructor (selector) {}/**绑定事件*@param event 绑定事件类型*@param selector 需要被代理的选择器*@param fn 触发函数* */on (event, selector, fn) {}/**移除事件*/destroy () {}}root.Delegator = Delegator
}(window, document)

定义两个实例属性，分别用来接受root节点和被代理的元素对象。

 constructor (selector) {this.root = document.querySelector(selector);//顶级domthis.delegatorEvents = {//代理元素及事件//evenType:[{//matcher:selector,//元素dom节点//callback:fn,//事件函数}]};}

绑定事件具体逻辑

1.事件代理触发顺序满足冒泡规则；；
2.this 应当指向正确的元素；
3.相同事件只做一个监听
4.新添加元素也能够响应绑定；

   constructor (selector) {this.root = document.querySelector(selector);//顶级domthis.delegatorEvents = {};//代理元素及事件//代理逻辑this.delegator = e => {        let currentNode = e.target;//目标节点const targetEventList = this.delegatorEvents[e.type];//实现冒泡规则while (currentNode !== e.currentTarget) {targetEventList.forEach(target => {if (currentNode.matches(target.matcher)) {//开始委托并把当前目标节点的event对象传过去，改为this指向target.callback.call(currentNode, e);}})currentNode = currentNode.parentNode;}}}/**绑定事件*@param event 绑定事件类型*@param selector 需要被代理的选择器*@param fn 触发函数* */on (event, selector, fn) {//相同事件只添加一次，如果存在，则再对应的代理事件里添加if (!this.delegatorEvents[event]) {this.delegatorEvents[event] = [{matcher: selector,callback: fn}]this.root.addEventListener(event, this.delegator);}else{this.delegatorEvents[event].push({matcher: selector,callback: fn})}return this;}

注销事件

    /**移除事件*/destroy () {Object.keys(this.delegatorEvents).forEach(eventName => {this.root.removeEventListener(eventName, this.delegator)});}

全部代码

!function (root, doc) {class Delegator {/**@param 顶级选择器（代理者）*/constructor (selector) {this.root = document.querySelector(selector);//顶级domthis.delegatorEvents = {};//代理元素及事件//代理逻辑this.delegator = e => {        let currentNode = e.target;//目标节点const targetEventList = this.delegatorEvents[e.type];//如果当前目标节点等于事件当前所在的节点，不再向上冒泡while (currentNode !== e.currentTarget) {targetEventList.forEach(target => {if (currentNode.matches(target.matcher)) {//开始委托并把当前目标节点的event对象传过去target.callback.call(currentNode, e);}})currentNode = currentNode.parentNode;}}}/**绑定事件*@param event 绑定事件类型*@param selector 需要被代理的选择器*@param fn 触发函数* */on (event, selector, fn) {//相同事件只添加一次，如果存在，则再对应的代理事件里添加if (!this.delegatorEvents[event]) {this.delegatorEvents[event] = [{matcher: selector,callback: fn}]this.root.addEventListener(event, this.delegator);}else{this.delegatorEvents[event].push({matcher: selector,callback: fn})}return this;}/**移除事件*/destroy () {Object.keys(this.delegatorEvents).forEach(eventName => {this.root.removeEventListener(eventName, this.delegator)});}}root.Delegator = Delegator
}(window, document)

JS手动实现事件代理相关推荐

js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS事件委托或者事件代理原理以及实现
事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...
js事件流、事件代理等
菜菜的自己发现真的啥都不太懂 - 虽然啥都会一点,但是却什么都不精通. 偶然看见js事件流和事件代理等 - 黑人问号脸,虽然在实际写代码的时候经常用到. 做个总结: 都是学的别人的. 事件代理:通过将 ...
js事件委托或事件代理
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS中的事件委托 / 代理详解
[前言] 事件委托/代理是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的 [主体] 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用 ...
JS 事件代理和事件委托
目录事件委托的概念理解为什么要用事件委托事件委托的原理: 事件代理(委托)实现总结: 事件委托的概念理解为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...
js中的事件委托或是事件代理详解
参考文章:https://www.cnblogs.com/liugang-vip/p/5616484.html 概述事件委托也叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒 ...
JS的事件处理机制以及事件代理（事件委托）
一.先记个小知识点.cssText cssText 本质:设置 HTML 元素的 style 属性值. 用法:document.getElementById("d1").style ...

JS手动实现事件代理

简介

实现步骤

创建一个Delegator类，定义一个on方法（监听），再定义一个destroy方式（用于注销事件）

定义两个实例属性，分别用来接受root节点和被代理的元素对象。

绑定事件具体逻辑

注销事件

全部代码

JS手动实现事件代理相关推荐

最新文章

热门文章