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