JavaScript onclick 和 click 的区别详解
作者：ghimi 时间：2024-06-05 09:56:25
也就是 addEventListener 和 on 的区别
为什么需要 addEventListener？
先来看一个片段：
<div id ="box">测试</div>
用 on 的代码：
windwo.onload = function(){
var box = document.getElementById("box");
box.onclick = ()=>console.log("我是 box1");
box.onclick = ()=>console.log("我是 box2");
}
// 运行结果 ： 我是 box2
看到了吧，第二个 onclick 事件把第一个onclick 给覆盖了，虽然大部分情况我们用 on 就可以完成我们想要的效果，但是有时我们又需要执行多个相同的事件，很明显如果用 on 是无法实现的。但是可以使用 addEventListener 实现多次绑定同一个事件并且不会覆盖上一个事件。
用 addEventListener 的代码
window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click",()=>console.log("我是 box1"));
box.addEventListener("click",()=>console.log("我是 box2"));
}
// 运行结果： 我是 box1
//我是 box2
addEventListener 方法第一个参数填写事件名，注意不需要写 on ，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获处理事件程序，如果为 true 代表捕获阶段处理，如果是 false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数，不写第三个参数默认false。
第三个参数的使用
有时候的情况是这样的：
<body>
<div id = "box">
<div id = "child"></div>
</div>
</body>
如果我给 box 加 cclick 时间，如果我直接单击 box 没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？
box.addEventListener("click",()=>console.log("box"));
child.addEventListener("click",()=>console.log("child"));
// 执行结果：child -> box
也就是说，默认情况是按照事件冒泡的执行顺序进行的
如果第三个参数写的是 true，则按照事件捕获的执行顺序进行
来源：https://blog.csdn.net/qq_19922839/article/details/120724011
标签：JavaScript,onclick,click
0
投稿猜你喜欢
JupyterNotebook设置Python环境的方法步骤
2023-01-15 12:22:14
Javascript中判断一个值是否为undefined的方法详解
2024-04-19 09:54:13
Python对于json数据键值对遍历
2023-02-21 06:01:08
Python标准库calendar的使用方法
2023-09-01 01:28:07
Python 关于反射和类的特殊成员方法
2021-10-16 19:30:13
Python写的服务监控程序实例
2022-09-01 13:12:31
Python使用defaultdict读取文件各列的方法
2021-08-05 00:34:24
MySQL数据库学习之排序与单行处理函数详解
2024-01-22 13:01:01
python使用yaml 管理selenium元素的示例
2023-11-18 10:53:29
python爬虫入门教程--优雅的HTTP库requests（二）
2022-04-01 05:10:43
PHP引用的调用方法分析
2023-11-06 15:23:23
python人物视频背景替换实现虚拟空间穿梭
2023-06-11 06:58:30
Python的条件锁与事件共享详解
2021-12-16 22:02:23
Python数据类型之列表和元组的方法实例详解
2021-01-18 01:56:10
基于python分析你的上网行为 看看你平时上网都在干嘛
2021-09-02 15:04:39
使用Python的Flask框架实现视频的流媒体传输
2023-05-07 02:46:53
WSC脚本部件技术：利用Javascript编写ActiveX控件
2008-05-05 13:13:00
MediaPipe API实现骨骼识别功能分步讲解流程
2022-06-17 05:41:10
从零开始搭建MySQL MMM架构
2024-01-17 12:40:23
IE8 CSS之生成内容
2008-09-09 22:14:00