js事件实现
事件绑定方法
在JavaScript中，事件可以通过多种方式绑定到DOM元素上。常见的方法包括HTML属性、DOM属性以及addEventListener。
HTML属性方式
直接在HTML元素中指定事件处理函数：
<button onclick="handleClick()">Click me</button>DOM属性方式
通过JavaScript代码为DOM元素的属性赋值：
document.getElementById('myButton').onclick = function() {
console.log('Button clicked');
};addEventListener方法
推荐使用的方式，可以为一个事件添加多个监听器：
document.getElementById('myButton').addEventListener('click', function() {
console.log('First handler');
});
document.getElementById('myButton').addEventListener('click', function() {
console.log('Second handler');
});事件对象
当事件触发时，浏览器会创建一个事件对象（Event Object），包含与事件相关的属性和方法。
document.getElementById('myButton').addEventListener('click', function(event) {
console.log('Event type:', event.type); // 'click'
console.log('Target element:', event.target); // 触发事件的元素
console.log('Current element:', event.currentTarget); // 绑定事件的元素
});事件传播机制
JavaScript事件在DOM树中传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
阻止事件传播
使用stopPropagation方法可以阻止事件继续传播：
document.getElementById('inner').addEventListener('click', function(event) {
console.log('Inner element clicked');
event.stopPropagation();
});阻止默认行为
使用preventDefault方法可以阻止元素的默认行为：
document.getElementById('myLink').addEventListener('click', function(event) {
event.preventDefault();
console.log('Link click prevented');
});事件委托
事件委托利用事件冒泡机制，将事件处理程序绑定到父元素上，而不是每个子元素上。
document.getElementById('parent').addEventListener('click', function(event) {
if(event.target.classList.contains('child')) {
console.log('Child element clicked:', event.target.id);
}
});自定义事件
JavaScript允许创建和触发自定义事件，实现更灵活的事件机制。
创建和触发自定义事件
// 创建事件
const myEvent = new CustomEvent('myCustomEvent', {
detail: { message: 'Hello World' },
bubbles: true,
cancelable: true
});
// 监听事件
document.getElementById('myElement').addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// 触发事件
document.getElementById('myElement').dispatchEvent(myEvent);常见事件类型
JavaScript支持多种事件类型，包括鼠标事件、键盘事件、表单事件等。
鼠标事件
element.addEventListener('mousedown', handleMouseDown);
element.addEventListener('mouseup', handleMouseUp);
element.addEventListener('mousemove', handleMouseMove);键盘事件
document.addEventListener('keydown', function(event) {
console.log('Key pressed:', event.key);
});表单事件
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
console.log('Form submitted');
});
