原文: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. Python如何将RGB图像转换为Pytho灰度图像？

    我正尝试使用matplotlib读取RGB图像并将其转换为灰度.在matlab中,我使用这个: 1 img = rgb2gray(imread('image.png')); 在matplotlib t ...

  2. Python进阶篇：Socket多线程

    1. 初识Socket server和clinet之间的交互方式 2. 客户端和服务端的单次交互 ==================================== 服务端 import soc ...

  3. BZOJ.3611.[HEOI2014]大工程(虚树 树形DP)

    题目链接 要求的和.最大值.最小值好像都可以通过O(n)的树形DP做,总询问点数<=2n. 于是建虚树就可以了.具体DP见DP()函数,维护三个值sum[],mx[],mn[]. sum[]要开 ...

  4. zoj 2587 判断最小割的唯一性

    算法: 先求出残量网络,计算出从src能够到的点集A,再求出能够到dst的点集B,如果所有点都被访问到了,那么割就是唯一的,即(A,B),否则(A,V-A)和(V-B,B)都是最小割. (注意因为割的 ...

  5. ZeptoLab Code Rush 2015 A. King of Thieves 暴力

    A. King of Thieves Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/526/pr ...

  6. Codeforces Round #296 (Div. 1) B. Clique Problem 贪心

    B. Clique Problem time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  7. noip 1995 灯的排列问题 排列组合 DFS

    题目描述 设在一排上有N个格子(N≤20),若在格子中放置有不同颜色的灯,每种灯的个数记为N1,N2,……Nk(k表示不同颜色灯的个数). 放灯时要遵守下列规则: ①同一种颜色的灯不能分开: ②不同颜 ...

  8. opencv hog算子

    梯度直方图特征(HOG) 是一种对图像局部重叠区域的密集型描述符, 它通过计算局部区域的梯度方向直方图来构成特征.Hog特征结合SVM分类器已经被广泛应用于图像识别中,尤其在行人检测中获得了极大的成功 ...

  9. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

  10. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...