深入理解JavaScript事件机制
事件系统核心概念
JavaScript通过事件实现与HTML的交互。事件系统包含三个核心组件：
- 事件对象：存储事件状态信息
- 事件源对象：触发事件的目标元素
- 事件监听器：响应事件的回调函数
事件流模型
现代浏览器采用DOM2级标准的事件流模型，包含三个阶段：
- 捕获阶段：从window到目标元素的父元素
- 目标阶段：事件到达目标元素
- 冒泡阶段：从目标元素回传到window
示例代码：事件流演示
const container = document.getElementById('container');
const button = document.getElementById('btn');
// 捕获阶段事件处理
container.addEventListener('click', () => {
console.log('容器捕获阶段');
}, true);
// 冒泡阶段事件处理
container.addEventListener('click', () => {
console.log('容器冒泡阶段');
}, false);
// 目标元素事件处理
button.addEventListener('click', () => {
console.log('按钮点击事件');
});
事件处理方式
1. DOM0级事件处理
const btn = document.getElementById('myBtn');
btn.onclick = function() {
console.log('按钮被点击');
};
// 移除事件
btn.onclick = null;
2. DOM2级事件处理
function handleClick() {
console.log('处理点击事件');
}
const element = document.getElementById('demo');
element.addEventListener('click', handleClick);
// 移除事件
element.removeEventListener('click', handleClick);
3. 跨浏览器兼容方案
const eventUtils = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
}
};
事件对象属性
常用事件对象属性和方法：
- target：事件目标元素
- currentTarget：当前处理事件的元素
- stopPropagation()：阻止事件传播
- preventDefault()：阻止默认行为
示例：事件对象使用
document.addEventListener('click', function(event) {
console.log('点击目标:', event.target);
console.log('当前处理元素:', event.currentTarget);
// 阻止事件冒泡
event.stopPropagation();
// 阻止默认行为
event.preventDefault();
});
