文章目录





一、事件注册方式



1、事件注册简介


注册事件 又称为 " 绑定事件 " , 在 DOM 文档 中 为指定的 元素 添加事件 ;


注册事件 有两种方式 :

  • 传统方式 : 该方式也被称为 " on + 事件名称 " 模式 , 例如 : onclick、onmouseover 等注册方式 ;
  • 方法监听 : 使用 addEventListener() 方法 注册事件 ;

2、传统方式 注册事件


传统事件 注册方式 , 也被称为 " on + 事件名称 " 模式 , 写法简单 , 适用于简单场景 , 所有浏览器都支持该用法 ;

使用该方式注册的方法 , 注册的事件是唯一的 , 同一个元素的同一个事件只能设置一个处理函数 , 最后注册的 处理函数 会覆盖之前注册的 函数 ;


方式一 : 直接在 HTML 元素标签 内部 , 使用 " on + 事件名称 " 定义事件 ;

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

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

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

  // 为 btn1 注册第一个点击事件
  btn1.onclick = function() {
    alert('hello!');
  };

3、方法监听方式 注册事件 ( 推荐使用 )


方法监听 事件注册方式 , 通过 调用 DOM 元素的 addEventListener() 方法 , 为 元素对象 注册事件 , 这也是 W3C 推荐的标准方法 ;


方法监听 事件注册方式 有如下特点 :

  • 非唯一性 : 同一个元素的同一个事件可以注册多个监听器 , 它们会按照注册的顺序依次执行 ;
  • 灵活性 : 可以更精细地控制事件的触发阶段 ;
  • 可移除 : 可以 使用 removeEventListener() 方法移除指定的事件监听器 ;

兼容性 : IE9 之前的浏览器版本 不支持该用法 , 可使用 attachEvent 方法代替 ;


addEventListener() 方法原型 :

element.addEventListener(eventName, functionName[, useCapture]);
  • eventName : 事件类型字符串 , 不带 " on " 前缀 , 例如 " click "、 " mouseover " ;
  • functionName : 事件处理函数 , 事件触发时执行该函数 ;
  • useCapture : 可选参数 , 是一个布尔值 ;
    • false : 默认值 , 事件在 冒泡阶段 触发 ;
    • true : 事件在 捕获阶段 触发 ;




二、代码示例



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>
    <button id="btn1" onclick="alert('hello1!')">按钮1 传统方式注册事件1</button>
    <button id="btn2">按钮2 传统方式注册事件2</button>
    <button id="btn3">按钮3 事件监听方式注册事件</button>
    <script>
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var btn3 = document.getElementById('btn3');

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

        // 2. 事件侦听注册事件
        btn3.addEventListener('click', function() {
            alert('hello3!');
        })
    </script>
</body>

</html>

2、执行结果


在这里插入图片描述

点击 按钮1 :
在这里插入图片描述

点击 按钮2 :
在这里插入图片描述

点击 按钮3 :
在这里插入图片描述

完整执行过程 :
在这里插入图片描述

# 前端 # 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技术社区