Web Front-end
JS Tutorial
Detailed explanation of the difference between addEventListener and on
Detailed explanation of the difference between addEventListener and on
We introduced you to the use of addEventListener in JavaScript in a previous article. I believe that everyone has a better understanding of addEventListener, so today we will continue to introduce to you the detailed explanation of addEventListener. The difference with on!
Why do you need addEventListener?
Let’s take a look at a snippet first:
html code
<div id="box">追梦子</div>
Use the code of 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”See it, the second onclick replaces the first one onclick is covered. Although in most cases we can use on to achieve the results we want, but sometimes we need to execute multiple identical events. Obviously, if we use on, we cannot achieve what we want. , then there’s no need to guess, you must know it, right! addEventListener can bind the same event multiple times and will not overwrite the previous event.
Use the code of addEventListener
window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click",function(){
console.log("我是box1");
})
box.addEventListener("click",function(){
console.log("我是box2");
})
}
运行结果：我是box1
我是box2The first parameter of the addEventListenert method is to fill in the event name. Note that there is no need to write on. The second parameter can be a function, and the third parameter refers to the risk. Bubble phase or capture phase processingEvent processingProgram, if true represents capture phase processing, if false represents bubbling phase processing, the third parameter can be omitted, and in most cases there is no need to use the third parameter Parameter, if you don’t write the third parameter, the default is false
Use of the third parameter
Sometimes the situation is like this
<body> <div id="box"> <div id="child"></div> </div> </body>
If I add a click event to the box , if I click directly on the box, there is no problem, but if I click on the child element, how does it perform? (Execution order)
box.addEventListener("click",function(){
console.log("box");
})
child.addEventListener("click",function(){
console.log("child");
})
执行的结果：
child
boxIn other words, by default, events are executed in the order in which events bubble up.
If the third parameter is written as true, the execution order of event capture will be followed.
box.addEventListener("click",function(){
console.log("box");
},true)
child.addEventListener("click",function(){
console.log("child");
})
执行的结果：
box
childEvent bubbling execution process:
Starting from the most specific element (the element you clicked), the bubbling starts upward. Taking our case above, the order is: child->box
Event capture execution process:
Starting from the least specific element (the outermost box), bubbles start to bubble inside. Take our above case to talk about its order. Yes: box->child
##Summary:
Details the difference between addEventListener and on through the example method, detailed friends We have a better understanding of the use of addEventListener and on. I hope it will be helpful to your work!Related recommendations:
Detailed explanation of the use of addEventListener in JavaScript
javascript DOM object learning event flow addEventListener() usage tutorial
Analysis of addEventListener() and removeEventListener() in js
The above is the detailed content of Detailed explanation of the difference between addEventListener and on. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to set password protection for export PDF on PS
Apr 06, 2025 pm 04:45 PM
Export password-protected PDF in Photoshop: Open the image file. Click "File"> "Export"> "Export as PDF". Set the "Security" option and enter the same password twice. Click "Export" to generate a PDF file.
The difference between H5 and mini-programs and APPs
Apr 06, 2025 am 10:42 AM
H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.
Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder?
Apr 05, 2025 pm 01:03 PM
The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...
How to use XPath to search from a specified DOM node in JavaScript?
Apr 04, 2025 pm 11:15 PM
Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...
Difference between centos and ubuntu
Apr 14, 2025 pm 09:09 PM
The key differences between CentOS and Ubuntu are: origin (CentOS originates from Red Hat, for enterprises; Ubuntu originates from Debian, for individuals), package management (CentOS uses yum, focusing on stability; Ubuntu uses apt, for high update frequency), support cycle (CentOS provides 10 years of support, Ubuntu provides 5 years of LTS support), community support (CentOS focuses on stability, Ubuntu provides a wide range of tutorials and documents), uses (CentOS is biased towards servers, Ubuntu is suitable for servers and desktops), other differences include installation simplicity (CentOS is thin)
What are the different ways of promoting H5 and mini programs?
Apr 06, 2025 am 11:03 AM
There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.
The difference in output results of console.log: Why do the same variables have different printing methods but different results?
Apr 04, 2025 am 11:48 AM
In-depth discussion of the differences in console.log output in this article will analyze the reasons why the output results of console.log function in a piece of code are different. Code snippets involve URL parameter resolution...
Where is the C language function library? How to add the C language function library?
Apr 03, 2025 pm 11:39 PM
The C language function library is a toolbox containing various functions, which are organized in different library files. Adding a library requires specifying it through the compiler's command line options, for example, the GCC compiler uses the -l option followed by the abbreviation of the library name. If the library file is not under the default search path, you need to use the -L option to specify the library file path. Library can be divided into static libraries and dynamic libraries. Static libraries are directly linked to the program at compile time, while dynamic libraries are loaded at runtime.
