正文

掌握JS中获取事件源的小技巧，轻松应对各种事件处理需求

/0 浏览量
1105

在JavaScript中，处理事件是前端开发中非常常见的一项技能。而获取事件源（即触发事件的元素）是进行事件处理的基础。以下是一些实用的技巧，帮助你轻松应对各种事件处理需求。

1. 使用 event.target

这是最常用的方法之一。在事件处理函数中，event 对象代表触发事件的元素。使用 event.target 可以直接获取到触发事件的元素。

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log(event.target.id); // 输出 'myButton'
});

2. 使用 event.currentTarget

event.currentTarget 与 event.target 的区别在于，event.currentTarget 指的是绑定事件的目标元素，而 event.target 指的是触发事件的元素。在某些情况下，这两个属性可能指向同一个元素。

document.getElementById('myContainer').addEventListener('click', function(event) {
  console.log(event.target.id); // 输出 'myChild'
  console.log(event.currentTarget.id); // 输出 'myContainer'
});

3. 使用 event.srcElement

event.srcElement 与 event.target 的作用相同，但在旧版浏览器中，event.srcElement 是推荐使用的方法。

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log(event.srcElement.id); // 输出 'myButton'
});

4. 使用事件委托

事件委托是一种利用事件冒泡原理来处理事件的技术。通过在父元素上监听事件，然后根据事件的目标元素来执行相应的操作。

document.getElementById('myContainer').addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    console.log('Button clicked!');
  }
});

5. 使用 querySelector 和 closest

querySelector 和 closest 是两个非常有用的DOM选择器方法。你可以使用它们来获取事件源。

document.getElementById('myContainer').addEventListener('click', function(event) {
  var target = event.target;
  var button = target.querySelector('button');
  console.log(button.id); // 输出 'myButton'
  
  var closestButton = target.closest('button');
  console.log(closestButton.id); // 输出 'myButton'
});

6. 使用 addEventListener 的第三个参数

addEventListener 的第三个参数是一个布尔值，表示事件处理函数是否在捕获阶段执行。默认值为 false，表示在冒泡阶段执行。通过设置这个参数，你可以更精确地控制事件处理函数的执行时机。

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Button clicked!');
}, true); // 在捕获阶段执行

通过以上技巧，你可以轻松地在JavaScript中获取事件源，并对其进行相应的处理。希望这些技巧能帮助你更好地应对各种事件处理需求。

-- 展开阅读全文 --