事件¶
事件三要素
- 事件类型,由浏览器预定义的行为,比如:click、mouseover、keydown 等
- 事件源,触发事件的元素,比如:按钮、链接、输入框等
- 事件处理程序,响应事件的函数,在事件发生时被调用
HTML属性直接绑定¶
不推荐,不安全且代码难以维护
<button id="myButton" onclick="alert('Hello!')">Click Me!</button>
<script src="./test.js"></script>
DOM属性绑定¶
// DOM属性绑定事件,按钮被点击时触发,弹出警告框
const btn = document.getElementById('myButton');
btn.onclick = function() {
alert('你点击了按钮!');
};
addEventListener
推荐¶
const btn = document.getElementById('myButton');
btn.addEventListener('click', function (event) {
})
const btn = document.getElementById('myButton');
btn.addEventListener(
'click',
function(event) {
console.log('事件类型:', event.type)
console.log('目标元素:', event.target)
console.log(`鼠标点击位置 (${event.clientX}, ${event.clientY})`)
alert('Hello!');
},
false // 可选参数,指定事件处理程序是在捕获阶段(true)还是冒泡阶段执行(false,默认)
);
事件监听¶
const btn = document.getElementById('myButton');
const sayHello = function() {
alert('Hello!');
};
// 添加事件监听器
btn.addEventListener('click', sayHello, false);
// 移除事件监听器,防止内存泄漏
btn.removeEventListener('click', sayHello, false);
事件委托¶
事件有冒泡和捕获的特性,可以不直接监听实际的目标元素,而是监听其父元素
const ul = document.querySelector('ul')
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
alert(`内容为 ${event.target.textContent} 的 li 被点击了!`)
}
})
自定义事件¶
const customEvent = new CustomEvent('myEvent', {
detail: { message: '这是一个自定义事件' },
})
document.addEventListener('myEvent', (event) => {
console.log('自定义事件被触发了:', event.detail.message)
})
document.dispatchEvent(customEvent) // 触发事件