event.target 的亲兄弟 event.currentTarget

Target

做项目的时候遇到的一个挺好玩的属性,就是event.currentTarget这个东西,可能我们以前用的比较多的是event.target

场景

我们在列表下<li>标签绑定了事件,然后<li>下是一堆的<i> 标签用作动画。并且<li>上有用属性定义着要跳转的地址。

提取例子

<ul id="outer">
  <li id="inner"></li>
</ul>
<div id="result"></div>
body {
  padding: 25px;
  font-family: Helvetica, Arial, sans-serif;
}

#outer {
  float: left;
  padding: 50px;
  margin: 0 0 25px;
  background-color: #086fa1;
}

#inner {
  width: 100px;
  height: 100px;
  background-color: #3ca0d0;
}

#result {
  clear: left;
}

code {
  font-size: 1.2em;
}

p,
ul {
  margin: 0 0 25px;
}
var outer = document.getElementById('outer'),
  result = document.getElementById('result')

outer.addEventListener('click', function(e) {
  var html = ''
  if (e.target === outer && e.currentTarget === outer) {
    html +=
      '<p>Outer element was clicked directly - it is <code>e.target</code> <em>and</em> <code>e.currentTarget</code>.</p>'
  }

  if (e.target !== outer && e.currentTarget === outer) {
    html +=
      '<p>Outer element is the current target, but it was not clicked directly - it is <code>e.currentTarget</code>.</p>'
  }

  html += [
    '<ul>',
    '<li><code>e.target === &lt;div id="',
    e.target.id,
    '"&gt;</code></li>',
    '<li><code>e.currentTarget === &lt;div id="',
    e.currentTarget.id,
    '"&gt;</code></li>',
    '</ul>'
  ].join('')

  result.innerHTML = html
})

总结

针对不同的属性,总结两点如下:

  • event.target捕获发出事件的目标,也是就相当于事件的产生者的意思
  • event.currentTarget则是相当于事件冒泡被设置好监听的对象捕获了。

所以如果遇到外层元素如果设置了监听函数而里面还有其他元素的情况下,为了防止点击里面的元素通过event.target获取不到事件对象,可以用event.currentTarget来获取。

Last Updated:
<manfred>峯</hu>
欢迎关注微信公众号 【Big前端】无广告,无软文,就是这么傲娇。直推一线大厂高质量内容,不局限于前端·后台·运维相关,还包括房价🏠、信用卡💳等内容也可内推一线大厂腾讯阿里字节,对腾讯字节比较熟悉,简历可以发给我,我会给你介绍一线大厂的情况,让你更加了解一线大厂