JavaScript事件操作允许您对事件(例如点击、键盘按键、鼠标移动等)作出反应并执行适当的操作。以下是一些常用的事件操作:
1.添加事件监听器:使用addEventListener()方法可以将事件监听器添加到HTML元素上。例如,为按钮添加点击事件监听器:
const button = document.querySelector('#myButton'); button.addEventListener('click', () => { console.log('Button Clicked'); });
2.删除事件监听器:使用removeEventListener()方法可以将事件监听器从HTML元素上删除。例如,删除前面例子中的按钮点击事件监听器:
button.removeEventListener('click', () => { console.log('Button Clicked'); });
3.阻止默认事件行为:使用preventDefault()方法可以阻止事件的默认行为。例如,阻止链接跳转:
const link = document.querySelector('#myLink'); link.addEventListener('click', event => { event.preventDefault(); });
4.停止事件冒泡:使用stopPropagation()方法可以停止事件的传播。例如,防止事件冒泡到父元素:
const child = document.querySelector('#myChild'); child.addEventListener('click', event => { event.stopPropagation(); });
5.触发事件:使用dispatchEvent()方法可以在元素上触发指定的事件,例如:
const button = document.querySelector('#myButton'); const event = new Event('click'); button.dispatchEvent(event);
6.获取事件目标和类型:事件监听器函数的第一个参数是事件对象,您可以使用它来获取事件的目标和类型。例如:
const button = document.querySelector('#myButton'); button.addEventListener('click', event => { console.log(event.target); // 获取事件目标 console.log(event.type); // 获取事件类型 });