原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currenttarget-c9680c3a46d1

In this case, at the time you call console.log(e), there's a DOM element in the currentTarget property. But sometime later, that property is reset to null for some reason. When you expand the event object, that's what you see.
你的情况是，当调用console.log(e)时，currentTarget属性是有值的，但是过后这个值就被重置为null了。所以当你展开事件对象，看到的就是null。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #wrapDiv,

        #innerP,

        #textSpan {

            margin: 5px;

            padding: 5px;

            box-sizing: border-box;

            cursor: default;

        }

        #wrapDiv {

            width: 300px;

            height: 300px;

            border: indianred 3px solid;

        }

        #innerP {

            width: 200px;

            height: 200px;

            border: hotpink 3px solid;

        }

        #textSpan {

            display: block;

            width: 100px;

            height: 100px;

            border: orange 3px solid;

        }

    </style>

</head>

<body>

    <div id="wrapDiv">wrapDiv

        <p id="innerP">innerP

            <span id="textSpan">textSpan</span>

        </p>

    </div>

    <script>

        var div = document.getElementById('wrapDiv');

        var p = document.getElementById('innerP');

        var span = document.getElementById('textSpan');

        div.onclick = function(ev){

            console.log(ev); //

            console.log("target:", ev.target);

            console.log("currentTarget:", ev.currentTarget);

        }

    </script>

</body>

</html>

　　

-----------------------------------------------

Event delegation is a popular methodology in JavaScript. It allows us to add an event listener to one parent, and avoid to add many event listeners to specific nodes. We can demonstrate this technique with simple example.

Let’s say we have a list with thousands of items:

<body>
  <div id="container">
   <ul id="list">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li> 
     <li><a href="#">Item 4</a></li>
     ..................................
     <li><a href="#">Item 1000</a></li>
   </ul>
  </div>
</body>

With such number of items, it would be a nightmare to loop through every <a> element on the page, adding an event listener one after one. Moreover, it may “freeze” the page when JavaScript is trying to create them all.

So here comes the event delegation: When the event bubbles up to the body element, we can check the element that triggered the event, using the event object’s target property.

document.addEventListener("click", function(e) {
  if(e.target && e.target.nodeName == "A") {
  console.log("List item ", e.target.textContent, " was clicked!");
  }
});
// When we click the 2nd item, the page prints out:
"List item Item 2 was clicked!"

target vs. currentTarget

Since we already talked about the event.target property, there is another property called event.currentTarget in JavaScript event. It can be very confused by just reading about them on JavaScript documentation.

As we’ve seen from the last example, when we clicked the a element, clickevent bubbles up to <body> node of the document like below:

<a> → <li> → <ul> → <div> → <body>

Let’s add one more line of code and prints out what the e.currentTarget is from the example we used above:

document.addEventListener(“click”, function(e) {
  if(e.target && e.target.nodeName == “A”) {
    console.log(“List item “, e.target.textContent, “ was clicked!”);  // "List item Item 2 was clicked!"
  }
  console.log(e.currentTarget);  // #document
});

It prints out “document” since we attached current event listener to the document while e.target refers to <a> which we clicked.

We can also look at one more example to see the differences between target and currentTarget. This time, we add the event listener to the <ul>:

document.getElementById(“list”).addEventListener(“click”, function(e) {
  console.log(e.currentTarget);  //<ul><li>...</li><ul>
  console.log(e.target);         //<a href="#">Item 2</a>
);

Again, the currentTarget refers to the element that the event listener directly attached to while the target still refers to the specific <a> we clicked.

With these two properties target and currentTarget, we can easily manipulate the node when the event gets triggered, as well as the node the event is attached to.

JavaScript Event Delegation, and event.target vs. event.currentTarget的更多相关文章

  1. Event对象中的target属性和currentTarget属性的区别

    先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...

  2. JavaScript Interview Questions: Event Delegation and This

    David Posin helps you land that next programming position by understanding important JavaScript fund ...

  3. javascript 事件委托 event delegation

    事件委托 event delegation 一.概念: 假设我们有很多个子元素,每个元素被点击时都会触发相应事件,普通的做法是给每个子元素添加一个事件监听. 而,事件委托则是给它们的父元素添加一个事件 ...

  4. javascript事件代理(Event Delegation)

    看了几篇文章,放上来供参考 司徒正美的文章,Event Delegation Made Easy --------------------------------------------------- ...

  5. JavaScript------事件委托（event delegation）

    简单的说,事件委托(event delegation)是在DOM上层(也就是在触发事件的元素的父元素上)定义事件的处理程序,而不是定义在触发事件的元素本身上. 首先我们来举这样一个例子:我有N个li元 ...

  6. window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取，window.event与时间函数参数的event是同一个 事件对象

    判断事件触发的元素:     var tag = window.event.target || window.event.srcElement;    if (tag.tagName.toLowerC ...

  7. JS:event对象下的target属性和取消冒泡事件

    1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...

  8. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  9. javascript运行模式：并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

随机推荐

  1. 2809: [Apio2012]dispatching 可并堆 左偏树

    https://www.lydsy.com/JudgeOnline/problem.php?id=2809 板子题wa了一下因为输出ans没有lld #include<iostream> ...

  2. SPOJ GSS

    GSS1 题目大意:给出一个数列,多次询问区间最长连续子段和 题解:线段树维护区间最长连续子段和gss,区间从最左元素开始的最长连续子段和lgss 区间以最右元素为结尾的最长连续子段和rgss以及区间 ...

  3. 【原创】实战padding oracle漏洞

    首先关于padding oracle漏洞的原理请看: 步入正传~~ 搭建漏洞利用环境Perl 环境下载地址:链接:http://pan.baidu.com/s/1skFxVm1 密码:anuw 首先查 ...

  4. Java并发（二十）：线程本地变量ThreadLocal

    ThreadLocal是一个本地线程副本变量工具类. 主要用于将私有线程和该线程存放的副本对象做一个映射,各个线程之间的变量互不干扰,在高并发场景下,可以实现无状态的调用,特别适用于各个线程依赖不同的 ...

  5. Trie树理解

    前言 Trie树又称单词查找树,字典树,是哈希树的变种: 优点在于:最大限度地减少无谓的字符串比较,查询效率比哈希高: 缺点在于:空间消耗很大: 性质 其基本性质可以归纳为: 跟结点不包括字符,除跟结 ...

  6. MyTalkStuffHomeIcon-2

    圆形.高清头像素材专用-2

  7. HDU 4217 Hamming Distance 随机化水过去

    Hamming Distance Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) ...

  8. git服务器安装和配置

    http://www.cnblogs.com/dee0912/p/5815267.html

  9. UIAutomator2.0初始

    1. 先直接上样例,谷歌官方Demo: https://github.com/googlesamples/android-testing 2. 一句话说明改动思路 Most importantly, ...

  10. Red Hat Enterprise Linux 7.4上安装Oracle 11.2.0.4

    1. 配置Yum源及关闭SeLinux [root@localhost ~]# mkdir /media/rhel [root@localhost ~]# mount /dev/cdrom /medi ...