The difference between on event and addevent event

on incident

 function fn1(){alert(1)};
 function fn2(){alert(2)};
document.onclick=fn1();
document.onclick=fn2();

Only pop-up 2
-Using the on event, when you add more than one event to a tag, the later one will overwrite the previous one.

 function fn1(){alert(1)};
 function fn2(){alert(2)};
 document.addEventListener('onclick',fn1()); //1        
  document.addEventListener('onclick',fn2()); //2

. addEvent event monitoring can add multiple events to a tag, and previous events will not be overwritten
-Three parameters can be passed in addevent:
*1. The first parameter in addevent is the type of the corresponding event passed in (do not add on)
*2. The second parameter of addevent is the callback of the function
*3. The value of bool type. If it is false (the default is), the event triggering mechanism will be based on bubbling (from bottom to top). If it is true, it will be based on event capture, from top to bottom
For example:

  <style>
     .div1{
           width: 300px;
            height: 300px;
            background: red;
            margin: 100px auto;  }
        .div2{
            width: 200px;
            height: 200px;
            background: blue;  }
        .div3{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
    <script>
        window.onload=function(){

            div1.addEventListener("click",function(){
                alert(1);
            } ,false);
            div1.addEventListener("click",function(){
                alert(2)
            } ,true);
            div3.addEventListener("click",function(){
                alert(3)
            } ,false);
        }
    </script>
</head>
<body>
<div class="div1">
          <div class="div2">
                 <div class="div3"></div>
          </div>
</div>
</body>

Add a click event to div1 and div3, and then pop up 2, 3 and 1

 1. div1.addEventListener("click",function(){
                alert(1);
            } ,false);
 2. div1.addEventListener("click",function(){
                alert(2)
            } ,true);
  3.div3.addEventListener("click",function(){
                alert(3)
            } ,false);

Analysis code: look at the code from the top, click div1, an event comes in, which is false, so it doesn't reflect, and it won't play; in the second code, it is true, and div1 catches the event and pops up 2; in the third code, false also doesn't respond. Event goes out to trigger the third code, pop up 3; then go up to the first code, pop up 1

false: bubbling, that is, if you are triggered by an event going out, you will execute this function
true: capture. If an incoming event triggers you, you will execute this function

Posted by phil_j_poore on Tue, 07 Apr 2020 09:50:19 -0700

Programmer Group

The difference between on event and addevent event

on incident

Hot Keywords