JavaScript 事件委托详解 | 掘金技术征文
基本概念
事件委托，通俗地来说，就是把一个元素响应事件（click、keydown......）的函数委托到另外一个元素；javascript
通常来说，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到须要绑定的元素上时，会经过事件冒泡机制从而触发它的外层元素的绑定事件上，而后在外层元素上去执行函数；html
举个例子，好比一个宿舍的同窗同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一我的出去拿好全部快递，而后再根据收件人一一分发给每一个宿舍同窗；java
在这里，取快递就是一个事件，每一个同窗指的是须要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，因此真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，须要判断当前响应的事件应该匹配到被代理元素中的哪个或者哪几个。node
事件冒泡
前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？jquery
在 document.addEventListener 的时候咱们能够设置事件模型：事件冒泡、事件捕获，通常来讲都是用事件冒泡的模型；web
如上图所示，事件模型是指分为三个阶段：浏览器
- 捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；
- 目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
- 冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理便是利用事件冒泡的机制把里层所须要响应的事件绑定到外层；
事件委托的优势
1. 减小内存消耗
试想一下，若果咱们有一个列表，列表之中有大量的列表项，咱们须要在点击列表项的时候响应一个事件；函数
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
......
<li>item n</li>
</ul>
// ...... 表明中间还有未知数个 li复制代码
若是给每一个列表项一一都绑定一个函数，那对于内存消耗是很是大的，效率上须要消耗不少性能；post
所以，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，而后在执行事件的时候再去匹配判断目标元素；性能
因此事件委托能够减小大量的内存消耗，节约效率。
2. 动态绑定事件
好比上述的例子中列表项就几个，咱们给每一个列表项都绑定了事件；
在不少时候，咱们须要经过 AJAX 或者用户操做动态的增长或者去除列表项元素，那么在每一次改变的时候都须要从新给新增的元素绑定事件，给即将删去的元素解绑事件；
若是用了事件委托就没有这种麻烦了，由于事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程当中去匹配的；
因此使用事件在动态绑定事件的状况下是能够减小不少重复工做的。
jQuery 中的事件委托
jQuery 中的事件委托相信不少人都用过，它主要这几种方法来实现：
$.on: 基本用法:$('.parent').on('click', 'a', function () { console.log('click event on tag a'); })，它是 '.parent' 元素之下的a元素的事件代理到$('.parent')之上，只要在这个元素上有点击事件，就会自动寻找到.parent元素下的a元素，而后响应事件；$.delegate: 基本用法:$('.parent').delegate('a', 'click', function () { console.log('click event on tag a'); })，同上，而且还有相对应的$.delegate来删除代理的事件；$.live: 基本使用方法:$('a', $('.parent')).live('click', function () { console.log('click event on tag a'); })，同上，然而若是没有传入父层元素$(.parent)，那事件会默认委托到 $(document) 上；(已废除)
实现功能
基本实现
好比咱们有这样的一个 HTML 片断：
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
......
<li>item n</li>
</ul>
// ...... 表明中间还有未知数个 li复制代码
咱们来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上：
// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
// 兼容性处理
var event = e || window.event;
var target = event.target || event.srcElement;
// 判断是否匹配目标元素
if (target.nodeName.toLocaleLowerCase === 'li') {
console.log('the content is: ', target.innerHTML);
}
});复制代码
在上述代码中， target 元素则是在 #list 元素之下具体被点击的元素，而后经过判断 target 的一些属性（好比：nodeName，id 等等）能够更精确地匹配到某一类 #list li 元素之上；
使用 Element.matches 精确匹配
若是改变下 HTML 成：
<ul id="list">
<li className="class-1">item 1</li>
<li>item 2</li>
<li className="class-1">item 3</li>
......
<li>item n</li>
</ul>
// ...... 表明中间还有未知数个 li复制代码
这里，咱们想把 #list 元素下的 li 元素（而且它的 class 为 class-1）的点击事件委托代理到 #list 之上；
若是经过上述的方法咱们还须要在 if (target.nodeName.toLocaleLowerCase === 'li') 判断之中在加入一个判断 target.nodeName.className === 'class-1'；
可是若是想像 CSS 选择其般作更加灵活的匹配的话，上面的判断未免就太多了，而且很难作到灵活性，这里可使用 Element.matches API 来匹配；
Element.matches API 的基本使用方法: Element.matches(selectorString)，selectorString 既是 CSS 那样的选择器规则，好比本例中可使用 target.matches('li.class-1')，他会返回一个布尔值，若是 target 元素是标签 li 而且它的类是 class-1 ，那么就会返回 true，不然返回 false；
固然它的兼容性还有一些问题，须要 IE9 及以上的现代化浏览器版本；
咱们可使用 Polyfill 来解决兼容性上的问题：
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}复制代码
加上 Element.matches 以后就能够来实现咱们的需求了：
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
document.getElementById('list').addEventListener('click', function (e) {
// 兼容性处理
var event = e || window.event;
var target = event.target || event.srcElement;
if (target.matches('li.class-1')) {
console.log('the content is: ', target.innerHTML);
}
});复制代码
函数封装
在应对更多场景上咱们能够把事件代理的功能封装成一个公用函数，这样就能够重复利用了。
结合上面的例子来实现一个函数 eventDelegate，它接受四个参数：
- [String] 一个选择器字符串用于过滤须要实现代理的父层元素，既事件须要被真正绑定之上；
- [String] 一个选择器字符串用于过滤触发事件的选择器元素的后代，既咱们须要被代理事件的元素；
- [String] 一个或多个用空格分隔的事件类型和可选的命名空间，如 "click" 或 "keydown.click" ;
- [Function] 须要代理事件响应的函数；
这里就有几个关键点：
- 对于父层代理的元素可能有多个，须要一一绑定事件；
- 对于绑定的事件类型可能有多个，须要一一绑定事件；
- 在处理匹配被代理的元素之中须要考虑到兼容性问题；
- 在执行所绑定的函数的时候须要传入正确的参数以及考虑到
this的问题；
function eventDelegate (parentSelector, targetSelector, events, foo) {
// 触发执行的函数
function triFunction (e) {
// 兼容性处理
var event = e || window.event;
var target = event.target || event.srcElement;
// 处理 matches 的兼容性
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// 判断是否匹配到咱们所须要的元素上
if (target.matches(targetSelector)) {
// 执行绑定的函数，注意 this
foo.call(target, Array.prototype.slice.call(arguments));
}
}
// 若是有多个事件的话须要所有一一绑定事件
events.split('.').forEach(function (evt) {
// 多个父层元素的话也须要一一绑定
Array.prototype.slice.call(document.querySelectorAll(parentSelector)).forEach(function ($p) {
$p.addEventListener(evt, triFunction);
});
});
}复制代码
优化
当被代理的元素不是目标元素的时候，既选择器 targetSelector 所指向的元素不是 event.target （事件目标阶段指向的元素）的时候，这时候就须要层层遍历 event.target 的 parentNode 去匹配 targetSelector 了，直到 parentSelector。
好比：
<ul id="list">
<li><span>item 1</span></li>
<li><span>item 2</span></li>
</ul>复制代码
仍是把 li 的事件代理到 #list 之上，但这时候会发现 event.target 指向的是 li span，所以须要层层遍历外层元素去匹配，直到到代理事件的函数，咱们能够用 event.currentTarget 来获取到代理事件的函数；
完整函数：
function eventDelegate (parentSelector, targetSelector, events, foo) {
// 触发执行的函数
function triFunction (e) {
// 兼容性处理
var event = e || window.event;
// 获取到目标阶段指向的元素
var target = event.target || event.srcElement;
// 获取到代理事件的函数
var currentTarget = event.currentTarget;
// 处理 matches 的兼容性
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// 遍历外层而且匹配
while (target !== currentTarget) {
// 判断是否匹配到咱们所须要的元素上
if (target.matches(targetSelector)) {
var sTarget = target;
// 执行绑定的函数，注意 this
foo.call(sTarget, Array.prototype.slice.call(arguments))
}
target = target.parentNode;
}
}
// 若是有多个事件的话须要所有一一绑定事件
events.split('.').forEach(function (evt) {
// 多个父层元素的话也须要一一绑定
Array.prototype.slice.call(document.querySelectorAll(parentSelector)).forEach(function ($p) {
$p.addEventListener(evt, triFunction);
});
});
}复制代码
使用函数：
eventDelegate('#list', 'li', 'click', function () { console.log(this); });复制代码
点击后能够看到 console 出了 #list li 元素对象；
局限性
固然，事件委托也是有必定局限性的；
好比 focus、blur 之类的事件自己没有事件冒泡机制，因此没法委托；
mousemove、mouseout 这样的事件，虽然有事件冒泡，可是只能不断经过位置去计算定位，对性能消耗高，所以也是不适合于事件委托的；
👇👇👇 更多的文章欢迎关注个人博客
qiutc.me/
👇👇👇 博客中的原文
qiutc.me/post/event-…
- 1. Flutter TextField详解 | 掘金技术征文
- 2. JavaScript事件委托的技术原理
- 3. javascript事件委托
- 4. 委托与事件-委托详解（一）
- 5. Javascript事件委托
- 6. javascript - 事件委托
- 7. js事件委托详解
- 8. 事件和委托详解
- 9. 回顾2016年 | 掘金技术征文
- 10. flow的使用 | 掘金技术征文
- 更多相关文章...
- • C# 委托（Delegate） - C#教程
- • kotlin 委托 - Kotlin 教程
- • 委托模式
- • 三篇文章了解 TiDB 技术内幕——说存储
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python的安装和Hello，World编写
- 2. 重磅解读：K8s Cluster Autoscaler模块及对应华为云插件Deep Dive
- 3. 鸿蒙学习笔记2（永不断更）
- 4. static关键字 和构造代码块
- 5. JVM笔记
- 6. 无法启动 C/C++ 语言服务器。IntelliSense 功能将被禁用。错误: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回码状态含义
- 8. Java树形结构递归（以时间换空间）和非递归（以空间换时间）
- 9. 数据预处理---缺失值
- 10. 都要2021年了，现代C++有什么值得我们学习的？
- 1. Flutter TextField详解 | 掘金技术征文
- 2. JavaScript事件委托的技术原理
- 3. javascript事件委托
- 4. 委托与事件-委托详解（一）
- 5. Javascript事件委托
- 6. javascript - 事件委托
- 7. js事件委托详解
- 8. 事件和委托详解
- 9. 回顾2016年 | 掘金技术征文
- 10. flow的使用 | 掘金技术征文