事件物件

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