js: 添加事件监听addEventListener、移除事件监听removeEventListener

简介: js: 添加事件监听addEventListener、移除事件监听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>
相关文章
|
7月前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
52 0
|
JavaScript
js数组去重:二维数组去重、去除相同的值、移除相同的数组
js数组去重:二维数组去重、去除相同的值、移除相同的数组
|
JavaScript
js移除返回数组相同字段
js移除返回数组相同字段
|
JavaScript 前端开发
🎖️JavaScript 中 onclick 和 addEventListener 的区别
onclick是一个 HTML 属性,用于在用户单击特定元素(如按钮或链接)时执行附加的 JavaScript 代码。而 addEventListener 是 JavaScript 中的一种方法,允许开发人员动态地将事件处理程序附加到 HTML 元素上。
322 0
|
JavaScript
JS 解决 removeEventListener 不生效问题
JS 解决 removeEventListener 不生效问题
568 0
|
Web App开发 JavaScript 前端开发
一日一技:如何使用JavaScript移除少数派的付费内容
一日一技:如何使用JavaScript移除少数派的付费内容
122 0
|
JavaScript API
js: 添加事件监听addEventListener、移除事件监听removeEventListener
js: 添加事件监听addEventListener、移除事件监听removeEventListener
155 0
|
前端开发 算法 JavaScript
LeetCode移除元素使用JavaScript解题|前端学算法
LeetCode移除元素使用JavaScript解题|前端学算法
119 0
LeetCode移除元素使用JavaScript解题|前端学算法
|
JavaScript
JS 刷 Leetcode:027. 移除元素
JS 刷 Leetcode:027. 移除元素
JS 刷 Leetcode:027. 移除元素
|
JavaScript 前端开发 算法
27. 移除元素:JavaScript 遍历和双指针两种解法
27. 移除元素:JavaScript 遍历和双指针两种解法
133 0
27. 移除元素:JavaScript 遍历和双指针两种解法

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    40
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    32
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    54
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55