详解addEventListener与on的区别
我们在之前的一篇文章中给大家介绍了关于JavaScript中addEventListener的使用，相信小伙伴么对addEventListener都有了进一步的了解，那么我们今天继续给大家介绍详解addEventListener与on的区别！
为什么需要addEventListener？
先来看一个片段：
html代码
<div id="box">追梦子</div>
用on的代码
window.onload = function(){
var box = document.getElementById("box");
box.onclick = function(){
console.log("我是box1");
}
box.onclick = function(){
box.style.fontSize = "18px";
console.log("我是box2");
}
}
运行结果：“我是box2”看到了吧，第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，那不用猜，你们肯定知道了，对！addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
用addEventListener的代码
window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click",function(){
console.log("我是box1");
})
box.addEventListener("click",function(){
console.log("我是box2");
})
}
运行结果：我是box1
我是box2addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数,不写第三个参数默认false
第三个参数的使用
有时候的情况是这样的
<body> <div id="box"> <div id="child"></div> </div> </body>
如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）
box.addEventListener("click",function(){
console.log("box");
})
child.addEventListener("click",function(){
console.log("child");
})
执行的结果：
child
box也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。
如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。
box.addEventListener("click",function(){
console.log("box");
},true)
child.addEventListener("click",function(){
console.log("child");
})
执行的结果：
box
child事件冒泡执行过程：
从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box
事件捕获执行过程：
从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child
总结：
通过对实例的方法详述了addEventListener与on的区别、详细小伙伴们对addEventListener与on的使用有了进一步的了解，希望对你的工作有所帮助！
相关推荐：
JavaScript中addEventListener的使用详解
javascript DOM对象学习之事件流addEventListener()使用教程
解析js中addEventListener()与removeEventListener()
以上是详解addEventListener与on的区别的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PS导出PDF如何设置密码保护
Apr 06, 2025 pm 04:45 PM
在 Photoshop 中导出带密码保护的 PDF：打开图像文件。点击“文件”>“导出”>“导出为 PDF”。设置“安全性”选项，两次输入相同的密码。点击“导出”生成 PDF 文件。
centos和ubuntu的区别
Apr 14, 2025 pm 09:09 PM
CentOS 和 Ubuntu 的关键差异在于：起源（CentOS 源自 Red Hat，面向企业；Ubuntu 源自 Debian，面向个人）、包管理（CentOS 使用 yum，注重稳定；Ubuntu 使用 apt，更新频率高）、支持周期（CentOS 提供 10 年支持，Ubuntu 提供 5 年 LTS 支持）、社区支持（CentOS 侧重稳定，Ubuntu 提供广泛教程和文档）、用途（CentOS 偏向服务器，Ubuntu 适用于服务器和桌面），其他差异包括安装精简度（CentOS 精
H5和小程序与APP的区别
Apr 06, 2025 am 10:42 AM
H5、小程序和APP的主要区别在于：技术架构：H5基于网页技术，小程序和APP为独立应用程序。体验和功能：H5轻便易用，功能受限；小程序轻量级，交互性好；APP功能强大，体验流畅。兼容性：H5跨平台兼容，小程序和APP受平台限制。开发成本：H5开发成本低，小程序中等，APP最高。适用场景：H5适合信息展示，小程序适合轻量化应用，APP适合复杂功能应用。
在router文件夹下的index.js文件中为什么需要调用Vue.use(VueRouter)？
Apr 05, 2025 pm 01:03 PM
在router文件夹下的index.js文件中注册VueRouter的必要性在开发Vue应用程序时，常常会遇到关于路由配置的问题。特�...
JavaScript中如何从指定DOM节点下使用XPath进行查找？
Apr 04, 2025 pm 11:15 PM
DOM节点下XPath查找方法详解在JavaScript中，我们经常需要根据XPath表达式从DOM树中查找特定的节点。如果需要从某�...
不同数据库系统添加列的语法有什么区别
Apr 09, 2025 pm 02:15 PM
不同数据库系统添加列的语法为：mysql：alter table table_name add column_name data_type; postgresql：alter table table_name添加column_name data_type; oracle; oracle：alter table table_name add（column_name data_type）
laravel和thinkphp的区别
Apr 18, 2025 pm 01:09 PM
Laravel 和 ThinkPHP 都是流行的 PHP 框架，在开发中各有优缺点。本文将深入比较这两者，重点介绍它们的架构、特性和性能差异，以帮助开发者根据其特定项目需求做出明智的选择。
centos如何查看防火墙状态
Apr 14, 2025 pm 08:18 PM
CentOS防火墙的状态可以通过sudo firewall-cmd --state命令查看，返回running或not running。更详细的信息可以使用sudo firewall-cmd --list-all查看，包括已配置的区域、服务、端口等。如果 firewall-cmd 无法解决问题，可以使用sudo iptables -L -n查看iptables规则。修改防火墙配置前请务必做好备份，以确保服务器安全性。
