Detailed explanation of the difference between JavaScript onclick and click

Why is addEventListener needed?
Code using addEventListener

Use of the third parameter

Summarize

That is the difference between ddEventListener and on

Why is addEventListener needed?

Let’s take a look at a clip first:

<div id="box">Test</div>

Use on code:

windwo.onload = function(){
  var box = document.getElementById("box");
  box.onclick = ()=>console.log("I am box1");
  box.onclick = ()=>console.log("I am box2");
}
// Run result: I am box2

You see, the second onclick event covers the first onclick. Although in most cases we can use on to achieve the desired effect, sometimes we need to execute multiple identical events, which is obviously impossible to achieve using on. However, you can use addEventListener to bind the same event multiple times without overwriting the previous event.

Code using addEventListener

window.onload = function(){
  var box = document.getElementById("box");
  box.addEventListener("click",()=>console.log("I am box1"));
  box.addEventListener("click",()=>console.log("I am box2"));
}
// Operation result: I am box1
            //I am box2

The first parameter of addEventListener method is filled with the event name. Note that you do not need to write on. The second parameter can be a function. The third parameter refers to whether to process the event in the bubbling stage or the capture stage. If true, it means processing in the capture stage. If false, it means processing in the bubbling stage. The third parameter can be omitted. In most cases, the third parameter is not needed. If you do not write the third parameter, it defaults to 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 cclick event to the box, there is no problem if I click the box directly, but if I click the child element, how does it execute?

box.addEventListener("click",()=>console.log("box"));
child.addEventListener("click",()=>console.log("child"));
// Execution result: child -> box

That is to say, the default is to follow the order of event bubbling execution.

insert image description here

If the third parameter is true, the execution will be performed in the order in which the events are captured.

Summarize

1. The onclick event can only point to one object at a time

2. addEventListener can register multiple listeners for one event

3. addEventListener is valid for any DOM element, while onclick is limited to HTML elements

4. addEventListener can control the triggering phase of the listener (capture/bubble)

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of how to use JavaScript onclick event
Analysis of the essential differences and usage of click and onclick in JavaScript
JS implements a solution to the coexistence of onClick event and onDblClick event on the same DOM element
How to bind a click event (onclick) to a button in JavaScript
javascript uses onclick event to change the color of the selected row

<<: Solution to failure in connecting to mysql in docker

>>: Markup language - for

JavaScript implementation of classic snake game

Recommend

Apply provide and inject to refresh Vue page method

Table of contents Method 1: Call the function dir...

Teach you how to monitor Tomcat's JVM memory through JConsoler

Table of contents 1. How to monitor Tomcat 2. Jav...

An example of using a MySQL statement to find out the number of bytes occupied by various integers and their maximum and minimum values

Directly code: select 'bigint unsigned' a...

Detailed explanation of the difference between JavaScript onclick and click

Table of contents

Why is addEventListener needed?

Code using addEventListener

Use of the third parameter

Summarize

JavaScript implementation of classic snake game

Node.js sends emails based on STMP protocol and EWS protocol

Example of creating a virtual host based on Apache port

How to connect to MySQL database using Node-Red

CentOS 7 switching boot kernel and switching boot mode explanation

A debugging process record of Chinese garbled characters in the Tomcat source code startup console

Vue-cli creates a project and analyzes the project structure

Vue sample code for implementing two-column horizontal timeline

Several ways of running in the background of Linux (summary)

Detailed explanation of ActiveMQ deployment method in Linux environment

Recommend

Apply provide and inject to refresh Vue page method

Teach you how to monitor Tomcat's JVM memory through JConsoler

An example of using a MySQL statement to find out the number of bytes occupied by various integers and their maximum and minimum values

Linux installation apache server configuration process

How to use css overflow: hidden (overflow hiding and clearing floats)

Comparative Analysis of UI Applications of Image Social Networking Sites (Figure)

Use nginx + secondary domain name + https support

Five ways to achieve automatic page jump in HTML

MySQL 5.6 binary installation process under Linux

Several methods of horizontal and vertical centering of div content using css3 flex

Detailed explanation of basic operation commands such as starting and stopping Nginx under Windows

How to solve the problem of left alignment of the last line in flex layout space-between

Install .NET 6.0 in CentOS system using cloud server

50 Beautiful FLASH Website Design Examples

MySql quick insert tens of millions of large data examples