js event实现
事件基础概念
在JavaScript中，事件是用户或浏览器自身执行的某种动作，例如点击按钮、加载页面或按下键盘按键。事件处理程序是响应这些事件的函数。
事件监听方法
使用addEventListener方法可以给DOM元素添加事件监听器。该方法接收三个参数：事件类型、事件处理函数和可选的选项对象。
element.addEventListener('click', function(event) {
console.log('元素被点击');
});事件对象
当事件发生时，浏览器会创建一个事件对象，包含与该事件相关的所有信息。通过事件处理函数的参数可以访问这个对象。
element.addEventListener('click', function(event) {
console.log(event.target); // 触发事件的元素
console.log(event.type); // 事件类型
});事件冒泡与捕获
DOM事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。addEventListener的第三个参数可以控制监听器在哪个阶段触发。
// 捕获阶段触发
parent.addEventListener('click', handler, true);
// 冒泡阶段触发（默认）
child.addEventListener('click', handler, false);阻止默认行为
某些事件具有默认行为，例如点击链接会跳转页面。使用preventDefault方法可以阻止这些默认行为。
link.addEventListener('click', function(event) {
event.preventDefault();
console.log('链接点击被阻止');
});阻止事件传播
stopPropagation方法可以阻止事件在DOM树中进一步传播，包括冒泡和捕获阶段。
child.addEventListener('click', function(event) {
event.stopPropagation();
console.log('事件不会传播到父元素');
});事件委托
利用事件冒泡机制，可以在父元素上设置事件监听器来处理子元素的事件，这对于动态添加的元素特别有用。
list.addEventListener('click', function(event) {
if(event.target.tagName === 'LI') {
console.log('列表项被点击:', event.target.textContent);
}
});自定义事件
可以创建和触发自定义事件，用于组件间的通信。
// 创建自定义事件
const event = new CustomEvent('build', { detail: { time: Date.now() } });
// 监听自定义事件
element.addEventListener('build', function(e) {
console.log('自定义事件触发:', e.detail);
});
// 触发自定义事件
element.dispatchEvent(event);常见事件类型
- 鼠标事件：click, dblclick, mousedown, mouseup
- 键盘事件：keydown, keyup, keypress
- 表单事件：submit, change, focus, blur
- 窗口事件：load, resize, scroll
- 触摸事件：touchstart, touchmove, touchend
移除事件监听
使用removeEventListener可以移除之前添加的事件监听器，需要注意必须传递相同的函数引用。
function handler() {
console.log('事件处理');
}
element.addEventListener('click', handler);
element.removeEventListener('click', handler);
