js实现事件监听实现
事件监听的基本方法
在JavaScript中，事件监听可以通过多种方式实现，以下是常见的几种方法：
addEventListener方法
使用addEventListener可以为一个元素添加事件监听器，语法如下：
element.addEventListener(eventType, callbackFunction, useCapture);其中eventType是事件类型（如'click'），callbackFunction是事件触发时执行的函数，useCapture是可选参数，表示是否在捕获阶段触发。
HTML属性直接绑定 可以在HTML元素中直接通过属性绑定事件：
<button onclick="handleClick()">点击</button>然后在JavaScript中定义对应的函数：
function handleClick() {
console.log('按钮被点击');
}事件委托的实现
事件委托是利用事件冒泡机制，将事件监听器添加到父元素上，通过判断事件目标来处理子元素的事件：
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.matches('.child')) {
console.log('子元素被点击');
}
});移除事件监听
使用removeEventListener可以移除之前添加的事件监听器：
element.removeEventListener(eventType, callbackFunction, useCapture);需要注意的是，移除时的参数必须与添加时完全一致，包括回调函数的引用。
自定义事件的触发与监听
JavaScript允许创建和触发自定义事件：
// 创建自定义事件
const event = new Event('customEvent');
// 监听自定义事件
element.addEventListener('customEvent', function() {
console.log('自定义事件触发');
});
// 触发自定义事件
element.dispatchEvent(event);事件对象的使用
事件回调函数会接收到一个事件对象参数，包含事件相关信息：
element.addEventListener('click', function(event) {
console.log('事件类型：', event.type);
console.log('触发元素：', event.target);
console.log('当前元素：', event.currentTarget);
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
});一次性事件监听
通过{once: true}选项可以创建只触发一次的事件监听器：
element.addEventListener('click', function() {
console.log('这个监听器只会执行一次');
}, {once: true});被动事件监听器
对于滚动等频繁触发的事件，可以使用被动事件监听器提高性能：
element.addEventListener('touchmove', function() {
// 处理逻辑
}, {passive: true});
