利用事件委托和冒泡 判断点击了哪个元素或该元素的子级元素

**事件委托与冒泡**

在 JavaScript 中，事件委托和冒泡是两个常见的概念，它们可以帮助我们更高效地处理 DOM事件。下面，我们将详细介绍这两个概念，并提供示例代码。

###1.事件委托事件委托是一种优化事件绑定方式，通过在父元素上绑定一个事件监听器，而不是在每个子元素上绑定。这样可以减少内存占用和提高性能。

**示例代码**

javascript// 父元素上绑定点击事件document.getElementById('parent').addEventListener('click', function(event) {
 // 获取目标元素 let target = event.target;
 // 判断是否是子元素 if (target.classList.contains('child')) {
 console.log('点击了子元素');
 } else {
 console.log('点击了父元素');
 }
});

在上面的示例中，我们绑定了一个点击事件到父元素上，当用户点击父元素或其子元素时，事件监听器会被触发。我们通过 `event.target` 来获取目标元素，然后判断是否是子元素。

###2. 冒泡冒泡是指事件从子元素向父元素传递的过程。在 DOM 中，每个元素都有一个事件冒泡链，这意味着当用户在某个元素上触发事件时，事件会沿着这个链条向上传递。

**示例代码**

javascript// 子元素上绑定点击事件document.getElementById('child').addEventListener('click', function() {
 console.log('子元素被点击');
});

// 父元素上绑定点击事件document.getElementById('parent').addEventListener('click', function(event) {
 // 获取目标元素 let target = event.target;
 // 判断是否是子元素 if (target.classList.contains('child')) {
 console.log('冒泡：子元素被点击');
 } else {
 console.log('冒泡：父元素被点击');
 }
});

在上面的示例中，我们先绑定了一个点击事件到子元素上，然后再绑定一个点击事件到父元素上。当用户点击子元素时，事件会沿着事件冒泡链向上传递到父元素，并触发父元素的事件监听器。

###3. 综合使用在实际开发中，我们经常需要同时使用事件委托和冒泡来处理复杂的 DOM事件。下面是一个综合示例：

**示例代码**

javascript// 父元素上绑定点击事件document.getElementById('parent').addEventListener('click', function(event) {
 // 获取目标元素 let target = event.target;
 // 判断是否是子元素 if (target.classList.contains('child')) {
 console.log('冒泡：子元素被点击');
 // 做一些子元素相关的操作 document.getElementById('child').style.background = 'red';
 } else {
 console.log('冒泡：父元素被点击');
 // 做一些父元素相关的操作 document.getElementById('parent').style.background = 'blue';
 }
});

在上面的示例中，我们同时使用了事件委托和冒泡来处理 DOM事件。我们先绑定一个点击事件到父元素上，然后根据目标元素判断是否是子元素。如果是子元素，则触发子元素相关的操作，并沿着事件冒泡链向上传递到父元素。

通过综合使用事件委托和冒泡，我们可以更高效地处理复杂的 DOM事件，提高开发效率。