前端小笔记 onclick addEventListener 区别

最新推荐文章于 2024-04-05 06:42:51 发布
最新推荐文章于 2024-04-05 06:42:51 发布
阅读量101 收藏
点赞数
分类专栏： 前端开发 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doiido/article/details/134036446
版权
本文比较了JavaScript中onclick的独特性与addEventListener的灵活性，强调了addEventListener对DOM通用性、控制触发阶段、避免重复触发及IE9的兼容策略，包括使用attachEvent和detachEvent。
摘要由CSDN通过智能技术生成

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent

doiido
关注
专栏目录
前端-常用点击事件获取元素的方式及onclick如何获取点击事件所在的元素
weixin_58443158的博客
08-07 542
事件处理器来获取触发事件的元素。事件处理器会被传入一个事件对象（），该对象包含关于事件的所有信息，包括触发事件的元素。3、事件的处理程序：事件触发后要执行的代码（函数）事件公式：事件源.事件类型 = 事件的处理程序。在JavaScript中，可以通过给元素添加。获取到是哪个元素触发了事件。1、事件源：被触发的元素。当按钮被点击时，会触发。详看示例代码，如何在。
前端js中的onclick点击事件
热门推荐
个人笔记
03-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 50px; background-color: skyblue; margin: 40px; } </style>
addEventListener与onclick
weixin_44224712的博客
06-20 275
3.addEventListener可以控制listener的触发阶段, addEventListener(type, function, false)在冒泡阶段触发，不写默认也是false；为true的时候是在捕获阶段触发。addEventListener 移除事件的时候，可以用removeEventListener函数。onclick只能给通一个元素绑定一个事件，无论绑定多少个，知会执行最后绑定的那个。addEventListener:可以给元素绑定多个事件，执行顺序是从上至下。
onclick addEventListener
qq_45178972的博客
10-26 186
正常的onclick 是冒泡 ，addEventListener 要看第三个参数，如果是true则是捕获机制，如果是false则是冒泡机制，
onclick 和 addEventListener的区别
qq_42880714的博客
08-08 1759
onclick 和 addEventListener的区别
onClick与addEventListener
qq_39141511的博客
03-22 198
<div id="div1" onclick="fn()"></div> <script type="text/javascript"> document.getElementById('div1').addEventListener('click',function(){ alert(1) }) document.getElementById('div1').addEventListener('click',function(){ alert(2) })
HTML-JavaScript-onclick与addEventlistener的使用以及优缺点
星河灿烂的博客
04-02 1456
2018.04.2********************************Day02******************************** author：wills 在html的具有交互功能的标签，比如button标签，或者type为botton的input的标签，它们都可以绑定属性，onclick，当这个按钮被点击时就触发事件。下面是一个简单的网页上添加内容的html文档代...
前端js学习笔记+es6
最新发布
07-16
### 前端JavaScript学习笔记与ES6特性详解 #### 学习背景及目标 根据提供的文件信息，本文档旨在通过李立超老师的课程为基础，深入解析JavaScript的基础知识及其ES6新特性。针对原笔记中存在的不足（如缺乏个性化...
前端技术笔记
11-01
- **DOM0级别的事件绑定**：使用事件属性如 `onclick` 或 `addEventListener`。 - **DOM2级别的事件绑定**：允许事件的叠加，使用 `addEventListener` 方法。 - **事件冒泡与捕获**：事件可以沿着DOM树从触发点向根...
前端学习笔记，做一个简单的网站-请自定义一个注册事件的兼容函数，要求兼容三种注册事件方法，学习代码
06-21
在前端开发中，事件处理是页面交互的核心部分。本文将深入探讨如何编写一个兼容不同浏览器的注册事件函数，以满足跨浏览器的前端应用需求。我们将主要关注三种常见的事件注册方法：`addEventListener`、`attachEvent...
前端十万字八股文面试笔记
08-21
这篇“前端十万字八股文面试笔记”是一个全面的前端面试指南，涵盖了JavaScript、CSS、计算机网络、操作系统以及Vue等多个核心领域。以下是其中的关键知识点详解： **JavaScript** 1. **DOM事件处理**：`onclick`...
JS笔记(前端小灰狼)
tby_pr的博客
09-08 3479
目录 JavaScript基础语法 序言 JavaScript发展历史（JS） JavaScript能干什么 JavaScript的组成 JavaScript代码的书写位置 行内式 JS 代码（不推荐） 内嵌式 JS 代码 外链式 JS 代码（推荐） JS 中的注释 单行注释 多行注释 变量（重点） 定义变量及赋值 变量的命名规则和命名规范 数据类型（重点） 基本数据类型 复杂数据类型（暂时先不讲） 判断数据类型 判断一个变量是不是数字 数据类型转换 其他数据
【JS边缘知识点01】onclik和addEventListener区别
大前端开发工程师、互联网方向创业者
11-29 222
onclik和addEventListener两者之间区别
前端JavaScript篇之addEventListener()方法的参数和使用
星辰迷上大海的博客
02-08 3834
addEventListener() 是 JavaScript 中用于向指定元素添加事件监听器的方法。这个方法通常用于处理用户交互，比如点击、鼠标悬停等操作。
addEventListener与onclick的区别
qq_44473483的博客
06-30 7236
在js中一直使用的addEventListener，依稀记得是看视频时老师说的这个好些，但也一直不明白两者之间的优缺点和联系，今天整理了下，对两者进行简单分析。 1.addEventListener可以对同一个元素绑定多个事件，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个事件，如有多个，后面的事件会覆盖前面的事件。 document.getElementById("myDIV").addEventListener("click", function() { alert(1) });
前端addEventListener
u014443425的博客
05-20 220
【代码】前端addEventListener。
javascript的addEventListener() 方法
qq_32666545的博客
08-19 3894
...
[JavaScript]onclick、addEventListener、attachEvent详解
2401_84092068的博客
04-05 1291
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！[外链图片转存中…(img-2JID2FuB-1712270526978)]
检测元素事件监听函数：onclick与addEventListener测试
"事件绑定是前端开发中的重要概念，主要涉及`onclick`和`addEventListener`两种方式。本文通过一个小测试探讨如何检测元素绑定的事件监听函数，并关注在Firefox、Chrome和Opera等非IE浏览器中的实现。" 在网页交互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值