DOM 事件对象

示例

要访问事件对象,请event在事件侦听器回调函数中包含一个参数:

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

function onClick(event) {
  // `event`参数是事件对象
  // 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与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