|
本文已参与[新人创作礼]活动，一起开启掘金创作之路。
昨天晚上搞了三小时的事件委托，菜鸡分享一下心得：
什么是事件委托？
事件委托这四个字我们进行拆分，事件就是onclick,onmouseover等。而委托就是将本该添加在当前点击的元素的事件，添加到别的元素上来完成这一事件。利用的是事件冒泡机制。
什么是事件冒泡：
在 document.addEventListener 的时候我们可以设置事件模型：事件冒泡、事件捕获，一般来说都是用事件冒泡的模型；
如图所示，事件模型是指分为三个阶段：
1.捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；
2.目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
3.冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；
参考链接：zhuanlan.zhihu.com/p/26536815
事件委托的优缺点：
优点：
减少了事件的注册，节省了内存。
第一张图是没有使用事件委托，第二张图是使用了事件委托。可以看出第一张图中每次循环遍历的div都需要绑定一个点击事件，而如果使用事件代理的话，只需要在循环元素的上一元素绑定事件，利用冒泡机制即可。
缺点：
1.事件委托基于冒泡，对于没有冒泡的事件是不支持的。
2.层级过多，冒泡的过程中，可能会被某一层给阻止掉。
3.理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在点击元素的上一层级进行代理，而不是在document上代理。
4.不宜过多的使用，容易混淆。比如在在document中代理了所有button的click事件，可能造成button触发多个点击事件；
实现功能
在实现时，因为在做项目时，遇到的一些问题。今天就一一道来为什么我要这样使用。在div部分的代码如图所示：
这个设计是三层模式，主要因为我们在做项目时不知道是点击图片还是图标还是文字，还是多种混合形式。我这个是点击图标和文字时使用的。最外面一层div进行事件注册，也就是想要点击元素的父元素。中间一层div包裹着你想要点击的所有内容。我在该div中设置了一个新的属性data-id，这是为了在js中获取标签元素时，可以获取到点击的是循环数组里面第几个元素。
下面就是js的代码：
e代表在DOM中出现的事件。一些事件是由用户触发的，例如鼠标或键盘事件；而其他事件常由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等等。事件也可以通过脚本代码触发，例如对元素调用 HTMLElement.click() 方法，或者定义一些自定义事件，再使用 EventTarget.dispatchEvent() 方法将自定义事件派发往指定的目标（target）。
这里就不详细讲解管Event的东西了，有想了解的请点击下方链接：developer.mozilla.org/zh-CN/docs/…
进行详细了解。
e.target获取到点击的标签元素，因为我的属性绑定的是点击元素的父元素，所以需要用到parentNode来获取父节点的元素对象。
这是打印的结果，获取到了父节点元素，就使用getAttribute方法通过名称来获取属性的值，这样我们就获取到绑定的index的值。到此我们想要的功能就实现了。
今天愚人节祝大家愚人节快乐！！！
|