Detailed explanation of the difference between JavaScript onclick and click

Detailed explanation of the difference between JavaScript onclick and click

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

Recommend

A brief introduction to bionic design in Internet web design

When it comes to bionic design, many people will t...

Summary of 7 types of logs in MySQL

There are the following log files in MySQL: 1: re...

Move MySQL database to another disk under Windows

Preface Today I installed MySQL and found that th...

JavaScript Shorthand Tips

Table of contents 1. Merge arrays 2. Merge arrays...

Detailed explanation of nginx front-end distribution method based on $remote_addr

The requirements are as follows: There are multip...

How to use CSS attribute value regular matching selector (tips)

There are three types of attribute value regular ...

How to use Nginx to solve front-end cross-domain problems

Preface When developing static pages, such as Vue...

MySQL 8.0.23 installation and configuration method graphic tutorial under win10

This article shares the installation and configur...

Mini Program Custom TabBar Component Encapsulation

This article example shares the specific code for...

A simple way to build a Docker environment

First, let’s understand what Docker is? Docker is...

Detailed explanation of obtaining, assigning, and registering radio values ​​in HTML

1. Radio grouping As long as the name is the same,...

Implementing CommonJS modularity in browsers without compilation/server

Table of contents introduction 1. What is one-cli...

js addition, subtraction, multiplication and division precise calculation method example code

Preface Because computer numbers are floating poi...

Springboot integrates docker deployment to implement two ways to build Docker images

Docker is an open source engine that makes it eas...

How to modify the default storage engine in MySQL

mysql storage engine: The MySQL server adopts a m...