使用原生 JS 实现事件委托

JavaScript与HTML之间的交互是通过事件实现的。在学习事件委托之前,我们需要先了解事件含义、事件绑定、事件监听、事件派发。

什么是事件?

简单来讲,可以理解为有一群人关注了一事件,如果该事件有变化,就会通知到这群人。
事件有3个特点:
1、订阅/监听了xxx事件
2、xxx发生变化
3、订阅人得到通知
站在前端开发的角度来想事件,就是“代码监听了用户,当用户操作发生变化,代码得到通知”

如何监听事件?

1、DOM level 0 在JS代码里添加:事件: button.onclick = function(){}
例:
<button id=xx>click me</button>
<script>
xx.onclick = function (e){
console.log('hi')
console.log(this)
console.log(e)
}
2、DOM level 2 事件: button.addEventListener('click', function(){})
例:
function event1(){
console.log('给ul绑定成功1')
}
//给相应的事件添加监听器
var ul =document.querySelector('#list')
ul.addEventListener('click',event1)

事件机制:冒泡&捕获

<div class="parent">
<div class="child"></div>
</div>
如果parent和child同时被监听,对于捕获阶段的通知机制,先出发parent监听,然后是child;冒泡则反之。在addEventListener()里添加一个参数false(执行冒泡)或者true(执行捕获),addEventListener()默认为false

事件委托

先看下面的例子:
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
var list = document.querySelector('list')
list.addEventListener('click',function (e){
if(e.target.tagName === 'LI'){
console.log('当前元素事件触发成功')
}
})
这是常规的实现事件委托的方法,但是这种方法有漏洞,当监听的元素里存在子元素时,那么我们点击这个子元素事件会失效,所以我们可以联系文章上一小节说到的冒泡事件传播机制来解决这个bug。改进的事件委托代码:
var ul = document.querySelector('list')
list.addEventListener('click',function (e){
var l = e.target

//从target(点击)元素向上找currentTarget(监听)元素,找到了想委托的元素就触发事件,如果直到找到监听li的包含元素块依然没找到依然没有找到,就返回null

while(l.tagName !== 'LI'){
l = l.parentNode
if(l === ul){
l = null
break;
}
}
if (l) {
console.log('你点击了ul里的li')
}
})
事件委托可以减少监听器,减少内存。

推荐阅读更多精彩内容

  • DOM事件 在我们的日常的生活中,无时无刻不在发生着各种类型的事件。比如说体育赛事、娱乐新闻、战争甚至天气变化等等...
    七里之境阅读 6,107评论 1 3
  • 1. 事件是什么 DOM事件即为Event对象。Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的...
    小胖子littlefatboy阅读 7,404评论 1 2
  • 1、如何监听事件 目前W3C对DOM进行标准化规定中对事件监听有两种方式,DOM level 0 中规定 butt...
    字母31阅读 275评论 0 0
  • Y燕_bf61阅读 189评论 2 3
  • 错误 每当走在运动场上,总会想起那次运动会的失败与错误。我的眼睛异常湿润,分不清里面流淌的是雨水还是泪水,我只知道...
    钢铁直男吴宣仪阅读 127评论 0 0
  • 文~牧心 是的春天到来了 正如你对我说的那样 一切都是东风的预谋 我把东风唤来 问燕子的归期 它敲着窗棂 像是对我...
    范乘风阅读 163评论 0 2
  • 正所谓打铁要趁热,刚看完《腾讯方法》一书,简单写点总结。 《腾讯方法》一书主要讲的是腾讯在布局移动游戏领...
    郑宏远阅读 4,511评论 3 13