文章目录





一、事件注册方式



1、删除传统方式注册事件


传统方式 注册事件 , 可以 直接在 HTML 标签里写 onclick 等属性 ,

<button id="btn1" onclick="alert('hello!')">按钮1</button>

也可以在 JavaScript 脚本中 , 获取元素对象 , 为元素对象的 " on + 事件名称 " 成员设置一个函数 ;

        var btn1 = document.getElementById('btn1');

        // 1. 传统方式注册事件
        btn1.onclick = function() {
            alert('hello1!');
        }

要删除这种事件 , 只需将对应的 DOM 元素的 onxxx 属性设置为 null 即可 ;

btn1.onclick = null;

这种方式将 事件处理程序 直接赋值给了 元素的一个属性 , 当你把它设置为 null , 就相当于移除了这个属性的值 , 事件自然就失效了 ;


2、删除方法监听方式注册事件


方法监听方式注册事件 是通过调用 DOM 元素的 element.addEventListener(eventName, functionName[, useCapture]); 函数 注册的事件 , 最现代、最推荐的事件注册方式 , 因为它允许为同一个事件注册多个处理程序 , 如下面的代码所示 :

        var btn2 = document.getElementById('btn2');

        // 2. 事件侦听注册事件
        function fun() {
            alert('hello2!');
        }
        btn2.addEventListener('click', fun);

要删除这种方式注册的事件 , 必须使用 removeEventListener 方法 , 并提供与注册时完全相同的参数 :

  • 事件类型 : 如 click , 不能有 on 前缀 ;
  • 处理函数 : 这里要求事件函数 , 不能是 匿名函数 , 因为 匿名函数 都是一次性的 ;
  • 可选参数 : 捕获 / 冒泡阶段 , 如果注册事件阶段指定了该参数 , 则删除事件时也必须指定该参数 ;

要移除上面 DOM 元素注册的事件 , 可以通过调用下面的代码实现 ;

btn2.removeEventListener('click', fun);




二、完整代码示例



1、代码示例


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件注册</title>
    <style></style>
</head>

<body>
    <div>
        <button id="btn1">按钮1 传统方式注册事件</button>
        <button id="btn2">按钮2 事件监听方式注册事件</button>
    </div>
    <div>
        <button id="btn3">移除 按钮1 点击事件</button>
        <button id="btn4">移除 按钮2 点击事件</button>
    </div>
    <script>
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');

        // 1. 传统方式注册事件
        btn1.onclick = function() {
            alert('hello1!');
        }

        // 2. 事件侦听注册事件
        function fun() {
            alert('hello2!');
        }
        btn2.addEventListener('click', fun);


        var btn3 = document.getElementById('btn3');
        var btn4 = document.getElementById('btn4');

        // 3. 移除 传统方式注册事件
        btn3.addEventListener('click', function() {
            btn1.onclick = null;
            alert('移除 按钮1 事件成功!');
        })

        // 4. 移除 事件监听方式注册事
        btn4.addEventListener('click', function() {
            btn2.removeEventListener('click', fun);
            alert('移除 按钮2 事件成功!');
        })
    </script>
</body>

</html>

2、执行结果


进入页面后 , 按钮1 和 按钮2 都有注册事件 ;

点击 " 移除 按钮1 点击事件 " 按钮后 , 按钮 1 事件被移除 , 再次点击 按钮 1 没有事件响应 ;

点击 " 移除 按钮2 点击事件 " 按钮后 , 按钮 2 事件被移除 , 再次点击 按钮 2 没有事件响应 ;

在这里插入图片描述

完整执行效果 :

在这里插入图片描述

# 前端 # javascript # 开发语言
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

avatar AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError

avatar AI Agent技术社区