js实现事件监听实现
事件监听的基本方法
在JavaScript中，事件监听可以通过多种方式实现，最常见的是使用addEventListener方法。该方法允许为特定元素绑定多个事件处理函数，避免覆盖已有的事件处理逻辑。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});内联事件监听
直接在HTML元素中通过属性绑定事件，这种方式简单但不利于维护，且只能绑定一个事件处理函数。
<button onclick="alert('Clicked!')">Click me</button>移除事件监听
使用removeEventListener可以移除已绑定的事件监听，注意需要传递与添加时相同的函数引用。
function handleClick() {
console.log('Button clicked');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);事件委托
通过事件冒泡机制，在父元素上监听子元素的事件，适用于动态添加的元素或大量子元素的情况。
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.matches('button.child')) {
console.log('Child button clicked');
}
});自定义事件
使用CustomEvent创建和触发自定义事件，实现更灵活的事件通信。
const event = new CustomEvent('myEvent', { detail: { key: 'value' } });
button.dispatchEvent(event);
button.addEventListener('myEvent', (e) => {
console.log('Custom event triggered', e.detail);
});事件对象
事件处理函数接收一个事件对象，包含事件的详细信息，如目标元素、事件类型等。
button.addEventListener('click', function(event) {
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});阻止默认行为
调用event.preventDefault()可以阻止事件的默认行为，如表单提交或链接跳转。
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
console.log('Link click prevented');
});停止事件传播
使用event.stopPropagation()可以阻止事件冒泡，避免父元素的事件监听被触发。
button.addEventListener('click', function(event) {
event.stopPropagation();
console.log('Event propagation stopped');
});一次性事件监听
通过{ once: true }选项可以让事件监听只触发一次，之后自动移除。
button.addEventListener('click', function() {
console.log('This will only log once');
}, { once: true });事件监听的高级选项
addEventListener还支持capture和passive等选项，用于控制事件捕获阶段或优化滚动性能。
window.addEventListener('scroll', function() {
console.log('Scrolling');
}, { passive: true });
