当一个事件被触发的时候,会创建一个事件对象 (Event Object)。这个对象包含一些属性或者方法。

1. event.targetevent.currentTarget

<div id="a">aaaaaaaaa
  <div id="b">bbbbbbbbbb
    <div id="c">ccccccccccc
      <div id="d">dddddddddddd</div>
    </div>
  </div>
</div>
const a = document.getElementById('a'),
      b = document.getElementById('b'),
      c = document.getElementById('c'),
      d = document.getElementById('d');

a.addEventListener('click', function() {
  console.log('target : ' + event.target.id + ' --- currentTarget : ' + event.currentTarget.id);
  console.log(event.currentTarget === this);
});
b.addEventListener('click', function() {
  console.log('target : ' + event.target.id + ' --- currentTarget : ' + event.currentTarget.id);
  console.log(event.currentTarget === this);
});
c.addEventListener('click', function() {
  console.log('target : ' + event.target.id + ' - currentTarget : ' + event.currentTarget.id);
  console.log(event.currentTarget === this);
});
d.addEventListener('click', function() {
  console.log('target : ' + event.target.id + ' - currentTarget : ' + event.currentTarget.id);
  console.log(event.currentTarget === this);
});

当点击 div#d 的时候,

输出结果:

target : d - currentTarget : d
true
target : d - currentTarget : c
true
target : d - currentTarget : b
true
target : d - currentTarget : a
true

可以看到: event.target 是触发事件的 DOM 元素,而 event.currentTarget 则是事件绑定的 DOM 元素。

另外,可以注意到在事件处理程序内部,对象 this 始终等于 currentTarget 的值。


2. event.preventDefault()event.stopPropagation()

  • event.preventDefault() 阻止元素发生默认行为
<a id="abtn" href="https://www.baidu.com">点击跳转 baidu</a>
document.querySelector('#abtn').addEventListener('click', function() {
  event.preventDefault();  // 现在就不能跳转了
});

但是,如果元素的 cancelable 属性是 false ,那么也就没有默认动作。那么调用这个方法没有作用。

  • event.stopPropagation() 阻止当前事件在 DOM 树的冒泡 (propagation: 波及,广传,繁殖)

根据 DOM 事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖先元素上。如果这些祖先元素上也绑定了相应的事件传递函数,那么就会触发执行这些函数。 而 stopPropagation() 可以阻止当前事件向祖先元素冒泡传递。

<div id="a">aaaaaaaaa
  <div id="b">bbbbbbbbbb</div>
</div
const a = document.getElementById('a'),
      b = document.getElementById('b');
a.addEventListener('click', function() {
  console.log('aaaaaa');
});
b.addEventListener('click', function() {
  console.log('bbbbbb');
  event.stopPropagation();
});

这样,停止事件冒泡,就会阻止 a 事件的发生。


拓展阅读:Event_MDN