当事件在子元素上时，如何获取当前元素？

在Web开发中，当事件在子元素上触发时，获取当前元素（即触发事件的元素）是一个常见的需求。可以使用JavaScript中的事件对象来实现这一点。以下是一些基础概念和相关方法：

基础概念

事件冒泡：当一个事件发生在某个元素上时，它会首先在这个元素上执行处理程序，然后逐级向上传播到它的父元素，直到文档根节点。
事件捕获：与事件冒泡相反，事件从最外层的元素开始，逐级向下传播到目标元素。
事件对象：当事件被触发时，浏览器会创建一个事件对象，其中包含有关该事件的信息。

获取当前元素的方法

方法一：使用 `event.target`

event.target 属性指向触发事件的实际元素。

document.querySelector('#parent').addEventListener('click', function(event) {
    console.log('触发事件的元素是:', event.target);
});

方法二：使用 `this`

在事件处理函数中，this 关键字通常指向绑定事件的元素（即父元素）。如果需要在子元素上获取当前元素，可以结合 event.target 使用。

document.querySelector('#parent').addEventListener('click', function(event) {
    console.log('绑定事件的元素是:', this);
    console.log('触发事件的元素是:', event.target);
});

示例代码

假设有如下HTML结构：

<div id="parent">
    <button id="child">点击我</button>
</div>

使用上述方法获取当前元素的JavaScript代码如下：

document.querySelector('#parent').addEventListener('click', function(event) {
    if (event.target.id === 'child') {
        console.log('当前元素是:', event.target);
    }
});