《前端》e.target的用法--2020年7月15日

target定义：
target 属性：触发事件的对象的引用（某个dom元素）。当事件处理程序在事件的冒泡或捕获阶段被调用。
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

语法：

event.target

event.target.nodeName 　　//获取事件触发元素标签名（li，p，div，img，button…）

event.target.id　　　　　　//获取事件触发元素id

event.target.className　　//获取事件触发元素classname

event.target.innerHTML　 //获取事件触发元素的内容（li）

示例：

// Make a list
var ul = document.createElement('ul');
document.body.appendChild(ul);

var li1 = document.createElement('li');
var li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);

function hide(e){
  // e.target 引用着 <li> 元素
  // 不像 e.currentTarget 引用着其父级的 <ul> 元素.
  e.target.style.visibility = 'hidden';
}

// 添加监听事件到列表，当每个 <li> 被点击的时候都会触发。
ul.addEventListener('click', hide, false);

jquery:this 与 e.target区别:

js中事件是会冒泡的，故this会冒泡而 e.target 不冒泡，它就是指向事件触发的dom。所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素。