Javascript：两种注册事件的区别

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量104 收藏
点赞数 3
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/139886416
版权

传统 on<事件类型> （例如onclick）注册（L0）

  • 对同一个对象，后面注册的相同类型的事件会覆盖前面注册的事件
  • 直接使用null赋值就可以实现事件的解绑，例如 对象.onclick = null
  • 都是冒泡阶段执行的

事件监听注册（L2）

  • 语法: addEventListener(事件类型, 事件处理回调函数, 是否使用捕获)用来注册事件
  • 后面注册的同类型事件不会覆盖前面注册的事件，例如，可以注册两个点击事件
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 如果要解绑事件，必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
  • 匿名函数无法被解绑
听海边涛声
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript事件处理的方式(三种)
11-25
有两种主要的事件流模式：事件冒泡和事件捕获。事件冒泡是指事件从最具体的元素（最深的子节点）开始，然后逐级向上层元素传递，直到到达最不具体的节点（通常是document）。事件捕获则相反，事件首先由最不具体的...
JavascriptEvents:Javascript事件
07-03
3. **事件冒泡与事件捕获**：事件在DOM层次结构中传播，有两种模式：事件冒泡（从最深的节点向上冒泡到父节点）和事件捕获（从最外层节点向下捕获到目标节点）。可以通过设置`useCapture`参数来选择哪种模式。 4. *...
javaScript：事件注册与事件监听
qq_52799985的博客
09-13 952
在JavaScript中，可以使用事件注册和事件监听来处理网页上的交互和用户操作。事件注册是指将事件处理函数与特定的事件关联起来，以便在事件触发时执行相应的代码。事件监听是一种更高级的事件处理方式，它能够在同一个元素上同时监听多个事件，并在事件触发时执行相应的处理函数。
JS中两种注册事件的区别
qq_57193827的博客
07-26 610
JS中两种注册事件的区别
JavaScript注册事件的两种方式
DangR_Jisoo的博客
11-29 698
JavaScript注册事件的两种方式 传统注册方式(具有唯一性，后面注册事件的处理函数会覆盖掉前面的处理函数) var btn=document.querySelectorAll('button'); btn[0].onclick=function(){ alert('你好'); //不会弹出 } btn[0].onclick=function(){ alert('我不好'); //会弹出 }
JavaScript中注册事件的三种方式
m0_67937429的博客
10-12 2877
注册事件的三种方式
eventQ.js:javascript的简单事件队列
06-03
可能需要提供两种类型的事件队列，一种用于宏任务，另一种用于微任务。当事件被添加时，可以根据其性质决定放入哪个队列。 5. **事件触发（Event Dispatching）**：一个机制用于触发事件，使得它们被添加到队列中...
实例讲解javascript注册事件处理函数
11-27
这种方式允许为同一元素添加多个事件处理函数，解决了前面两种方式的局限。然而，需要注意的是，IE浏览器使用`attachEvent`和`detachEvent`，语法有所不同，这可能导致跨浏览器的兼容性问题。 每种方式都有其适用...
EventReg:AngularJS 事件注册演示
06-13
种子应用程序没有做太多事情，只是展示了如何将两个控制器和视图连接在一起。 您可以通过在浏览器中打开 app/index.html 来查看它（在某些浏览器中可能无法使用file:// scheme，请参阅下面的注释）。 注意：虽然 ...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1138
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 172
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 155
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 598
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 717
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
RHeng的博客
07-25 1057
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 158
【代码】typescript中type和interface有什么区别，如何选择？
牛客JS题（二）直角三角形
不起眼小菜菜的博客
07-25 222
注释很详细，直接上代码……
如何关闭页面报错的遮罩层
karlaofsky的博客
07-25 207
在vue.config.js中添加如下配置，问题：如何关闭页面报错的遮罩层。
JavaScript事件模型：键盘事件与事件流
主要有两种模式： - 冒泡型事件：事件首先在最深的元素（事件目标）上触发，然后逐级向上层元素传播，直至到达文档的根节点。 - 捕获型事件：与冒泡相反，事件从文档的根节点开始，向下逐级传播到最深的元素。 不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值