js: 添加事件监听addEventListener、移除事件监听removeEventListener
2023-09-14 09:07:18 时间
文档
- https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
- https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener
语法
// 添加事件监听
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture=false]);
// 移除事件监听
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture=false]);
示例
<button onclick="addClickEventListener()">添加事件监听</button>
<button onclick="removeClickEventListener()">移除事件监听</button>
<script>
// 事件处理函数
function handleEvent(event) {
console.log(event)
}
// 添加事件监听
function addClickEventListener() {
console.log('addClickEventListener')
document.addEventListener('click', handleEvent)
}
// 移除事件监听
function removeClickEventListener() {
console.log('removeClickEventListener')
document.removeEventListener('click', handleEvent)
}
</script>
在线Demo: https://mouday.github.io/front-end-demo/eventListener.html
相关文章
- 关于js中的冒泡事件
- window.addEventListener来解决让一个js事件执行多个函数
- JS手动触发事件,转载
- js中如何在不影响既有事件监听的前提下新增监听器
- 使用addeventlistener为js动态创建的元素添加事件监听
- JS事件冒泡、停止冒泡、addEventListener--实例演示
- JS魔法堂:再次认识Function.prototype.call
- js笔记——理解js中的call及apply
- 原 JS监听回车事件
- JS给元素循环添加事件的问题
- js事件探秘
- Pycharm调用NodeJS运行js代码 的 环境配置
- [Node.js] Polling
- Atitit.js的键盘按键事件捆绑and事件调度
- js添加点击事件
- 【华为云技术分享】【一统江湖的大前端】PPT制作库impress.js
- js 实现二叉树前序遍历
- js图片监听onload事件,依然有获取不到宽高的场景
- js通过闭包实现多个相同事件只需绑定一次
- js字符串转为数字方法parseInt()、减号、乘号、JSON.parse()、Number()的效率比较
- js 鼠标事件模拟
- Node.js简单介绍
- js文字跳动效果
- Js学习之拖拉事件(拖动属性)HTML5 drag API(HTML 拖放 API)