事件对象

Created: November-22, 2018

要访问事件对象，请在事件侦听器回调函数中包含 event 参数：

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation（）;

HTML：

<div id="parent">
   <div id="child"></div>
</div>

使用 Javascript：

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

由于孩子停止事件传播，并且在冒泡阶段听到事件，点击孩子只会触发孩子。在不停止传播的情况下，将触发两个事件。

e.preventDefault（）;

event.preventDefault() 方法停止发生元素的默认操作。

例如：

阻止提交按钮提交表单
阻止链接跟随 URL

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target vs e.currentTarget

e.currentTarget 在事件遍历 DOM 时标识事件的当前目标。它始终引用事件处理程序附加到的元素，而不是 event.target，它标识事件发生的元素。

换一种说法

e.target 将返回触发事件调度程序触发的内容

e.currentTarget 将返回你为听众分配的内容。

HTML：

<body>
   <button id="my-button"></button>
</body>

使用 Javascript：

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

如果你点击 my-button，

e.target 将是 my-button
e.currentTarget 将是 body