1.2019独角兽企业重金招聘Python工程师标准

2.场景：最近开发微信小程序时候遇到了点击页面中的元素，js捕捉点击事件，并获取该元素的一些属性（比如我自定义了一个author="李一博"）,那么如何快速获取这个属性呢？其实首先要改变一下写法，用【data-】开头，元素属性即为data-author="李一博"，并且绑定一个点击事件，bindtap='getAuthor'。

3.接下来重点来了js部分

4.getAuthor:function(e){

5.console.log(e.currentTarget.dataset.author);//打印李一博

6.//看一下e对象的值

7.console.log(e);//参考下图

8.}

9.

10.（图片看不清双击看大图osChina这个编辑器我真用不惯）

11.注意：里面有两个对象存在我们要获取的内容一个是target一个是currentTarget区别简单来说是

e.target指向触发事件监听的对象。e.currentTarget指向添加监听事件的对象。

12.详细原因如下：（参考自简书）

13.在DOM事件对象中有两个属性总是时不时的困扰我，就是target和currentTarget，有时候很迷惑分不清两者的区别，因此有必要把这两个属性好好梳理一下，加深理解，以便日后的查询。MDN中对target的解释为，一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。举个例子来说明。

事件冒泡阶段!DOCTYPEhtmlhtmlheadmetacharset="utf-8"titleJSBin/title/headbodyullihello1/lilihello2/lilihello3/lilihello4/li/ulscriptletul=document.querySelectorAll('ul')[0]letaLi=document.querySelectorAll('li')ul.addEventListener('click',function(e){letoLi1=e.targetletoLi2=e.currentTargetconsole.log(oLi1)//被点击的liconsole.log(oLi2)//ulconsole.og(oLi1===oLi2)//false})/script/body/html

14.我们知道，e.target可以用来实现事件委托，该原理是通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target指向引发触发事件的元素，如上述的例子中，e.target指向用户点击的li，由于事件冒泡，li的点击事件冒泡到了ul上，通过给ul添加监听事件而达到了给每一个li添加监听事件的效果，而e.currentTarget指向的是给绑定事件监听的那个对象，即ul，从这里可以发现，e.currentTarget===this返回true，而e.target===this返回false。e.currenttarget和e.target是不相等的。

15.注意，在jQuery提供的on方法中，e.currentTarget与该方法接收的第二个参数有关，根据jQuery的文档描述

16.如果省略selector或者是null，那么事件处理程序被称为直接事件或者直接绑定事件。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的当提供selector参数时，事件处理程序是指为委派事件（事件委托或事件代理）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery会从eventtarget开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。

!DOCTYPEhtmlhtmlheadscriptsrc="//code.jquery.com/jquery-1.9.1.min.js"/scriptmetacharset="utf-8"titleJSBin/titlestyleli{padding:5px;border:1pxsolidred;}span{border:1pxsolid#000;}/style/headbodyullispanhello1/span/lilispanhello1/span/lilispanhello1/span/lilispanhello1/span/li/ulscriptletul=document.querySelectorAll('ul')[0]letaLi=document.querySelectorAll('li')$('ul').on('click','li',function(e){console.log(e.target)//被点击的元素console.log(e.currentTarget)//liconsole.log(e.currentTarget===this)//true})/script/body/html

17.当li中含有子元素的时候，e.target指的是触发事件的元素，可能是span也可能是li，此时的e.currentTarget指的是selector那个参数，也就是本例中的li。如果省略selector参数，那么它和addEventListener中e.target和e.currentTarget是一致的。

事件目标阶段

18.我们知道，在DOM事件流中分为几个不同的阶段，如图

19.上述例子是事件冒泡阶段，e.currenttarget和e.target是不相等的，但是在事件的目标阶段，e.currenttarget和e.target是相等的。

!DOCTYPEhtmlhtmlheadmetacharset="utf-8"titleJSBin/title/headbodyullihello1/lilihello2/lilihello3/lilihello4/li/ulscriptletul=document.querySelectorAll('ul')[0]letaLi=document.querySelectorAll('li')for(leti=0;iaLi.length;i++){aLi[i].addEventListener('click',function(e){letoLi1=e.targetletoLi2=e.currentTargetconsole.log(oLi1)//liconsole.log(oLi2)//liconsole.og(oLi1===oLi2)//true})}/script/body/html

20.在本例中，事件的目标阶段即li，由于e.currentTarget始终指向添加监听事件的那个对象，即aLi[i]，也就是HTML中的li，而e.target指向触发事件监听的那个对象，也是li，因此e.target和e.currentTarget相等，同时也和this相等。