前端小笔记 onclick addEventListener 区别

最新推荐文章于 2024-04-05 19:25:27 发布
原创 最新推荐文章于 2024-04-05 19:25:27 发布 · 180 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

本文比较了JavaScript中onclick的独特性与addEventListener的灵活性，强调了addEventListener对DOM通用性、控制触发阶段、避免重复触发及IE9的兼容策略，包括使用attachEvent和detachEvent。

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

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

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

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

5.IE9使用attachEvent和detachEvent

JS笔记(前端小灰狼)
tby_pr的博客
09-08 4036
目录 JavaScript基础语法 序言 JavaScript发展历史（JS） JavaScript能干什么 JavaScript的组成 JavaScript代码的书写位置 行内式 JS 代码（不推荐） 内嵌式 JS 代码 外链式 JS 代码（推荐） JS 中的注释 单行注释 多行注释 变量（重点） 定义变量及赋值 变量的命名规则和命名规范 数据类型（重点） 基本数据类型 复杂数据类型（暂时先不讲） 判断数据类型 判断一个变量是不是数字 数据类型转换 其他数据
前端技术笔记
11-01
- **DOM0级别的事件绑定**：使用事件属性如 `onclick` 或 `addEventListener`。 - **DOM2级别的事件绑定**：允许事件的叠加，使用 `addEventListener` 方法。 - **事件冒泡与捕获**：事件可以沿着DOM树从触发点向根...
onclick addEventListener
qq_45178972的博客
10-26 243
正常的onclick 是冒泡 ，addEventListener 要看第三个参数，如果是true则是捕获机制，如果是false则是冒泡机制，
JS中onclick与addEventListener的区别详解
01-08
一、onclick： 1.onclick添加事件：        语法： element.onclick = function (){};        实例如下： 点我 var box1 = document.getElementById(box1); box1.onclick = function(){ console.log(我是第一个); } box1.onclick = function(){ console.log(我是第二个); }        结果：        以上结果显示，点
前端JavaScript篇之addEventListener()方法的参数和使用
星辰迷上大海的博客
02-08 4998
addEventListener() 是 JavaScript 中用于向指定元素添加事件监听器的方法。这个方法通常用于处理用户交互，比如点击、鼠标悬停等操作。
onclick与addEventListener区别
Cassie's blog
01-26 1万+
这次做项目遇到了这个问题，本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候，引发了我的思考，这两者有区别吗？具体的事件分析可查看另一篇文章 结论： 1.onclick事件在同一时间只能指向唯一对象 2.addEventListener给一个事件注册多个listener 3.addEventLi...
onclick 和 addEventListener的区别
qq_42880714的博客
08-08 1984
onclick 和 addEventListener的区别
前端js学习笔记+es6
07-16
### 前端JavaScript学习笔记与ES6特性详解 #### 学习背景及目标 根据提供的文件信息，本文档旨在通过李立超老师的课程为基础，深入解析JavaScript的基础知识及其ES6新特性。针对原笔记中存在的不足（如缺乏个性化...
前端学习笔记，做一个简单的网站-请自定义一个注册事件的兼容函数，要求兼容三种注册事件方法，学习代码
06-21
在前端开发中，事件处理是页面交互的核心部分。本文将深入探讨如何编写一个兼容不同浏览器的注册事件函数，以满足跨浏览器的前端应用需求。我们将主要关注三种常见的事件注册方法：`addEventListener`、`attachEvent...
精选资源
前端十万字八股文面试笔记
08-21
这篇“前端十万字八股文面试笔记”是一个全面的前端面试指南，涵盖了JavaScript、CSS、计算机网络、操作系统以及Vue等多个核心领域。以下是其中的关键知识点详解： **JavaScript** 1. **DOM事件处理**：`onclick`...
addEventListener与onClick
qq_41522343的博客
08-25 264
一个dom元素绑定addEventListener和onClick时会根据绑定顺序执行，其中onClick只能绑定一个，再次绑定会覆盖。addEventListener可以绑定多个，按照绑定的先后顺序依次执行 document.getElementById('btn').onclick=function(){ console.log(2); } document.getElementById('btn').onclick=function(){ con
onClick与addEventListener
qq_39141511的博客
03-22 246
<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) })
addEventListener() 和 onclick 的区别
2301_79111443的博客
04-05 1999
我们经常会看到有关。
[JavaScript]onclick、addEventListener、attachEvent详解
2401_84092068的博客
04-05 1967
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！[外链图片转存中…(img-2JID2FuB-1712270526978)]
addEventListener与onclick
weixin_44224712的博客
06-20 358
3.addEventListener可以控制listener的触发阶段, addEventListener(type, function, false)在冒泡阶段触发，不写默认也是false；为true的时候是在捕获阶段触发。addEventListener 移除事件的时候，可以用removeEventListener函数。onclick只能给通一个元素绑定一个事件，无论绑定多少个，知会执行最后绑定的那个。addEventListener:可以给元素绑定多个事件，执行顺序是从上至下。
addEventListener 和 onclick 简单比较
weixin_33720956的博客
01-27 299
首先说一下addEventListener 语法： element.addEventListener(event, function, useCapture) 这里的event是事件名，function是相应的事件，这个useCapture是一个布尔值，默认是false，就是说在冒泡阶段执行，如果为true，就在捕获阶段执行 利用addEventListener可以简单复现网页中对一个对一个元素...
onclick和addEventListener 的区别
wlijun_0808的博客
11-27 287
onclick和addEventListener 的区别
前端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>
基于黑马前端视频学习的javascript笔记
最新发布
08-16
基于已知信息，黑马前端视频的 JavaScript 学习笔记主要涵盖以下核心知识点： ### 变量与数据类型 JavaScript 中的变量使用 `var`、`let` 和 `const` 声明，其中 `var` 具有函数作用域，而 `let` 和 `const` 是块级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值