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

Solution for Tomcat to place configuration files externally

question When we are developing normally, if we w...

Detailed explanation of JQuery selector

Table of contents Basic selectors: Level selector...

Example of converting webpack images to base64

Download url-loader yarn add -D url-loader module...

Vue implements image dragging and sorting

This article example shares the specific code of ...

How to implement remote access control in Centos 7.4

1. SSH remote management SSH is a secure channel ...

Solution to the problem that the number of MySQL connections is limited to 214 in CentOS 7

Find the problem Recently, I encountered a proble...

Example code for implementing concurrent request control in JavaScript/TypeScript

Scenario Suppose there are 10 requests, but the m...

A few steps to easily build a Windows SSH server

The SSH mentioned here is called Security Shell. ...

Detailed tutorial on installing mysql under Linux

1. Shut down the mysql service # service mysqld s...

How to solve the problem that MySQL cannot start because it cannot create PID

Problem Description The MySQL startup error messa...

How to deeply understand React's ref attribute

Table of contents Overview 1. Creation of Refs ob...

Detailed explanation of the use of the <meta> tag in HTML

In the web pages we make, if we want more people ...

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...

HTML table tag tutorial (24): horizontal alignment attribute of the row ALIGN

In the horizontal direction, you can set the row ...

WebWorker encapsulates JavaScript sandbox details

Table of contents 1. Scenario 2. Implement IJavaS...