原文: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）

    有时候处理数据时,想要按照字符串中的数字的大小进行排序. 譬如,存在一组记录文件,分别为‘1.dat’,'2.dat'... 当我把该文件夹中的所有记录文件名读到一个列表中,这些字符串的排列方式为: ...

  2. SKLearn数据集API（二）

    注:本文是人工智能研究网的学习笔记 计算机生成的数据集 用于分类任务和聚类任务,这些函数产生样本特征向量矩阵以及对应的类别标签集合. 数据集 简介 make_blobs 多类单标签数据集,为每个类分配 ...

  3. 手机html根据手机分辨率网页文字大小自适应

    问题:不同手机型号屏幕尺寸大不相同,导致同样的文字,有的显示一行,有的显示多行. 通过查资料和自己的尝试解决:网页开发习惯的px单位,手机html开发不适用. 源代码如下: <!DOCTYPE ...

  4. CF280C Game on Tree 期望

    期望多少次操作,我们可以看做是染黑了多少节点 那么,我们可以用期望的线性性质,求出每个节点被染黑的概率之和(权值为$1$) 一个节点$u$被染黑仅跟祖先有关 我们把$u$到祖先的链抽出来 只要选取链上 ...

  5. 详解Android基本布局

    一.线性布局 LinearLayout又称为线性布局,是一种非常常用的布局.这个布局会将它包含的控件在线性方向上依次排列.我们可以通过指定它的orientation属性来决定它是垂直方向排列还是水平方 ...

  6. CSS实现背景透明，文字不透明

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 使用 Nokia Imaging SDK 开发有滤镜功能的 Windows Phone 8 应用

    说到滤镜应用,相信很多数开发者都对照片特效的经验都十分有限,通常都是去找一些三方的类库进行学习或移植,今天在这里给大家介绍下 Nokia 的 Imaging SDK, 相信大家对Nokia的自家图像软 ...

  8. SPOJ 10232. Distinct Primes

    Arithmancy is Draco Malfoy's favorite subject, but what spoils it for him is that Hermione Granger i ...

  9. Poj 题目分类

    初期:一.基本算法:     (1)枚举. (poj1753,poj2965)     (2)贪心(poj1328,poj2109,poj2586)     (3)递归和分治法.     (4)递推. ...

  10. POJ Anniversary party 树形DP

    /* 树形dp: 给一颗树,要求一组节点,节点之间没有父子关系,并且使得所有的节点的权值和最大 对于每一个节点,我们有两种状态 dp[i][0]表示不选择节点i,以节点i为根的子树所能形成的节点集所能 ...