反应事件目标 [ - Javascript]

在Javascript中，事件处理程序可以添加到任何DOM元素上，并且事件的目标元素将自动成为事件处理程序中的this关键字。

目标属性

当事件发生时，事件对象的target属性将包含事件的目标元素，即触发事件的元素。

HTML

<button id="myButton">Click me!</button>

Javascript

const button = document.getElementById('myButton');

button.onclick = function() {
  console.log(this); // 输出按钮元素
};

在此示例中，当按钮单击时，将显示按钮元素。在这种情况下，事件处理程序中的this引用按钮元素，因为它是目标元素。

区分子元素和目标元素

有时，需要检查单击事件是否是在目标元素本身上发生的，而不是其子元素。

HTML

<div id="myDiv">
  <button>Click me!</button>
</div>

Javascript

const div = document.getElementById('myDiv');

div.onclick = function(event) {
  if (event.target === this) { // 确保单击事件发生在div元素而不是子元素上
    console.log(this); // 输出div元素
  }
};

对于动态创建的元素

如果您添加了一个事件侦听器到动态创建的元素，则必须确保事件处理程序在该元素被添加到文档之前不会触发。

为了解决这个问题，您可以使用事件委托。

HTML

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Javascript

const list = document.getElementById('myList');

list.onclick = function(event) {
  if (event.target.tagName === 'LI') {
    console.log('You clicked on', event.target.textContent);
  }
};

在这种情况下，单击事件委托给ul元素。当用户单击li元素时，事件将冒泡到ul元素并被捕获。因此，事件处理程序可以检查事件目标的标记名称，以确定事件是否发生在li元素上。