Event

属性

Event.currentTarget

Event 接口的只读属性 currentTarget 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 Event.target 则是事件触发的元素。

当将相同的事件处理程序附加到多个元素时 event.currentTarget 就很有用。

  1. function hide(e){
  2.   e.currentTarget.style.visibility = "hidden";
  3.   console.log(e.currentTarget);
  4.   // 该函数用作事件处理器时: this === e.currentTarget
  5. }
  7. var ps = document.getElementsByTagName('p');
  9. for(var i = 0; i < ps.length; i++){
  10.   // console: 打印被点击的p元素
  11.   ps[i].addEventListener('click', hide, false);
  12. }
  13. // console: 打印body元素
  14. document.body.addEventListener('click', hide, false);

Event.target

触发事件的对象 (某个DOM元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时，它与event.currentTarget不同。
在事件三个阶段（捕获-触发-冒泡), 触发事件的元素

event.target 属性可以用来实现事件委托 (event delegation)。

  1. // Make a list
  2. var ul = document.createElement('ul');
  3. document.body.appendChild(ul);
  5. var li1 = document.createElement('li');
  6. var li2 = document.createElement('li');
  7. ul.appendChild(li1);
  8. ul.appendChild(li2);
  10. function hide(e){
  11.   // e.target 引用着 <li> 元素
  12.   // 不像 e.currentTarget 引用着其父级的 <ul> 元素.
  13.   e.target.style.visibility = 'hidden';
  14. }
  16. // 添加监听事件到列表，当每个 <li> 被点击的时候都会触发。
  17. ul.addEventListener('click', hide, false);

Event.type

MDN
只读属性 Event.type 会返回一个字符串, 表示该事件对象的事件类型。

传给 EventTarget.addEventListener() 和 EventTarget.removeEventListener() 方法的 event 参数的值是忽略大小写的.
点击查看【codepen】