js绑定事件

一、基础绑定方法
1.HTML内联事件（不推荐）

直接在html标签中定义事件：

<button onclick="alert('Clicked')">按钮</button>

2.dom属性绑定

const btn = document.querySelector('button');
btn.onclick = function() { console.log('事件1'); };
// 会覆盖前一个事件
btn.onclick = function() { console.log('事件2'); }; 

3.addEventListener(推荐)

btn.addEventListener('click', function() {console.log('事件A'); // 不会覆盖其他事件
});
btn.addEventListener('click', function() {console.log('事件B'); // 按添加顺序执行
});

二、事件处理进阶
1.事件对象（event）

btn.addEventListener('click', function(e) {console.log(e.target); // 触发事件的元素e.stopPropagation();   // 阻止事件冒泡
});

2.事件委托
（1）定义与原理‌
事件委托是一种通过‌事件冒泡机制‌，将子元素的事件处理统一绑定到父元素的优化技术。其核心在于：

‌事件冒泡‌：当子元素触发事件时，事件会‌从触发元素逐层向上传递至父元素‌，直至文档根节点。
‌父元素代理‌：在父元素上监听目标事件（如 click），通过 event.target 识别实际触发事件的子元素并执行逻辑。
利用事件冒泡优化性能：
‌（2）核心作用‌
‌性能优化‌

减少事件处理器数量，避免为大量子元素单独绑定事件，降低内存消耗。
动态新增或删除子元素时，无需重新绑定事件。
‌代码简化‌

统一管理事件逻辑，降低维护复杂度。

document.getElementById('list').addEventListener('click', function(e) {if (e.target.tagName === 'LI') {console.log('点击了列表项:', e.target.textContent);}
});

注意事项‌
‌阻止事件冒泡‌：若子元素调用 e.stopPropagation()，事件委托将失效。
‌事件类型‌：仅支持会冒泡的事件（如 click），不适用于 focus、blur 等无冒泡机制的事件。
3.移出事件

const handler = function() { console.log('仅触发一次'); };
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler); // 移除指定事件

三、现代实践（es6+）
1.剪头函数注意点

btn.addEventListener('click', () => {console.log(this); // 箭头函数的this指向外层上下文
});

2.一次性事件

btn.addEventListener('click', () => {console.log(this); // 箭头函数的this指向外层上下文
});

四、兼容性与最佳实践
兼容性‌：addEventListener 支持IE9+，低版本需用attachEvent。
‌性能‌：事件委托减少内存占用，尤其适合动态生成的元素。
‌解耦‌：避免HTML内联事件，保持JS与HTML分离。