JS 事件目标 - Javascript

Javascript中的事件机制是Web开发中十分重要的一个部分。事件机制使得我们可以通过监听不同类型的事件来响应用户的操作，比如点击元素、输入等。当用户执行某些操作时，事件机制会触发事件响应函数。

事件目标

在Javascript中，每个事件都有一个事件目标，表示事件发生的元素。我们可以使用事件目标来捕获事件并执行相应的操作。

以点击事件为例，当用户点击一个元素时，点击事件会触发，并且事件目标就是被点击的元素本身。我们可以在事件响应函数中使用this关键字来获取事件目标元素。

const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  console.log(this); // 输出btn元素
});

在以上代码中，我们首先获取元素btn，然后给btn添加了一个click事件监听器。当用户点击按钮时，事件会触发，并且事件响应函数中的this指向了按钮元素。

事件的传播

在Javascript中，事件发生后还会经历事件传播的过程。事件传播涉及到三个概念：事件捕获、事件目标和事件冒泡。

在事件捕获阶段，事件会从根元素开始依次向下传递，直到事件目标元素。在事件冒泡阶段，事件会从事件目标元素开始向上冒泡，直到根元素。在这个过程中，我们可以通过事件监听器来捕获捕获或者冒泡阶段的事件。

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击了');
}, true);

inner.addEventListener('click', function() {
  console.log('内层div被点击了');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击了');
});

在以上代码中，我们定义了三个元素：outer、inner和btn。然后给outer和inner都添加了一个点击事件的监听器，并且开启了事件捕获模式。最后给btn添加了一个点击事件监听器。当用户点击按钮时，事件会依次经过outer和inner元素，最终到达按钮元素，触发按钮的点击事件，并且在事件执行过程中，三个监听器都分别被调用。在事件触发时，事件冒泡是默认开启的。如果我们在outer和inner元素上使用false作为最后一个参数开启事件冒泡，则监听器的调用顺序将会倒过来，即先执行按钮元素的监听器，再依次向外执行父元素监听器。

应用

事件机制是Javascript开发中至关重要的一部分。在实际开发中，我们需要经常监听各种事件，并且根据不同的事件目标去执行不同的操作。此外，合理地使用事件传播机制，可以极大地提高编程效率，降低代码的复杂度。

参考

• MDN Web Docs: 事件
• MDN Web Docs: Event.target
• MDN Web Docs: 事件传播