js事件操作

简介: JavaScript事件操作允许您对事件(例如点击、键盘按键、鼠标移动等)作出反应并执行适当的操作。以下是一些常用的事件操作:

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); // 获取事件类型
});


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
3月前
|
JavaScript 前端开发
js事件队列
js事件队列
141 55
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
2月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
34 2
|
3月前
|
JavaScript 前端开发
javascript中常用的事件
这篇文章列出并演示了JavaScript中常用的DOM事件,包括失去焦点、获得焦点、鼠标点击、键盘事件等,并展示了如何通过直接在HTML标签中使用事件句柄和通过JavaScript为元素添加事件监听器两种方式来注册事件。
|
3月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
39 0
|
25天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
43 6
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
22 5
|
2月前
|
监控 JavaScript 前端开发
|
28天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
79 0