微信小程序根据点击事件获取被点击元素的属性(常用)

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

接下来重点来了 js部分 

getAuthor : function(e){

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

    //看一下e对象的值

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

}

微信小程序根据点击事件获取被点击元素的属性(常用)_第1张图片

(图片看不清双击看大图 osChina这个编辑器我真用不惯 )

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

 

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

详细原因如下:(参考自简书)

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

事件冒泡阶段




  
  JS Bin


  
  • hello 1
  • hello 2
  • hello 3
  • hello 4

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

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

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




  
  
  JS Bin
  


  
  • hello 1
  • hello 1
  • hello 1
  • hello 1

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

事件目标阶段

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

 


上述例子是事件冒泡阶段,e.currenttargete.target是不相等的,但是在事件的目标阶段,e.currenttargete.target是相等的。

 




  
  JS Bin


  
  • hello 1
  • hello 2
  • hello 3
  • hello 4

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

 

转载于:https://my.oschina.net/kaiyuanlong/blog/1620098

你可能感兴趣的:(微信小程序根据点击事件获取被点击元素的属性(常用))