使用原生 JS 实现事件委托

在实现事件委托之前,首先必须先了解事件的绑定、监听和派发的含义。

事件的绑定

var div = document.getElementById('content')
content.onclick = function(){
console.log('绑定成功!')}

这是最直接简单的绑定在DOM元素上的一个事件。但是它有一个缺点:后面重复绑定的事件会直接覆盖掉之前绑定的事件。于是就产生了新的方法:

事件监听

var div = document.getElementById('content')

function f1 (){
console.log('绑定事件1
')}

function f2 (){
console.log('绑定事件2'
)} 

div.addEventListener('click',f1)
div.addEventListener('mousemove',f2)

addEventListener()事件的监听可以解决事件覆盖的问题,还可以控制事件的触发方式(即事件的捕获和冒泡)。

事件派发

事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

冒泡:

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <p>子元素</p>
  </div>
</body>
</html>

在这个例子中,当子元素P被点击时,事件冒泡的顺序为:p -> div -> body -> html -> document

捕获:

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。

仍然是上面的例子,当子元素P被点击时,事件捕获的顺序则是:document -> html -> body -> div -> p

下图是两个事件的通知顺序:

ps:可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来阻止事件的冒泡传播。在addEventListener()监听事件中,可以添加第三个参数 false(执行冒泡)或者 true(执行捕获)来选择需要的事件流顺序,addEventListener() 默认为false。

事件委托

事件委托是基于以上几个要点的。

以下是原生JS实现的事件委托的方法:

let dom = {
  on: function(element, eventType, selector, fn) {
    element.addEventListener(eventType, e => {
      let el = e.target
      while (!el.matches(selector)) {
        el = el.parentNode
        if (element === el) {
          el = null
          break
        }
      }
      el && fn.call(el, e, el)
    })
    return element
  },

具体举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div{
  border:1px solid #000;
  }
  p{
    background:red;
  }
  h1{
    background:blue;
  }
  </style>
</head>
<body>
  <div>
    <p>这是p</p>
    <h1>这是h1</h1>
  </div>
  <script>
var div = document.querySelector('div')
div.addEventListener('click',function(e){
  var t = e.target
  while(t.tagName !=='H1'){
    t = t.parentNode
    if(t === div){
      t = null
      break;
    }
  }
  if(t){
    console.log('你点击了div里的h1')
  }else{
    console.log('你点击的不是div里的h1')
  }
})
  </script>
</body>
</html>

例子的功能很简单,当你点击div里面的h1元素的时候,打印'你点击了div里的h1',当你点击的不是div里面的h1元素的时候,打印'你点击的不是div里的h1'

var div = document.querySelector('div')
div.addEventListener('click',function(e){

代码解析:选中div,并且对div进行监听,当div里面的元素被点击时触发。

var t = e.target
  while(t.tagName !=='H1'){
    t = t.parentNode

代码解析:声明t为被点击选中的目标,进入while循环,当被点击的目标不是h1包含的元素时,将t赋值为该点击目标的父级元素的tagName再比较,一直冒泡向上查找直到找到h1为止或者继续进入while循环。

 if(t === div){
      t = null
      break;
    }

代码解析:如果t的值是div,证明了从初始点击目标一直冒泡找到最外面的div层都不存在h1的父元素,证明了它并不存在于“div里面的h1元素”中,跳出循环。

  if(t){
    console.log('你点击了div里的h1')
  }else{
    console.log('你点击的不是div里的h1')
  }

代码解析:如果t存在,证明找到了点击元素存在为h1的父元素,即存在于div里的h1元素当中,打印出'你点击了div里的h1'如果t不存在,证明并没有找到点击元素有tagName为h1的父元素,并不存在于div里的h1元素当中,打印出'你点击的不是div里的h1'

事件委托的优点:

  • 减少使用监听器,优化代码
  • 能够监听动态的内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容