Dom0-level event binding

box.onclick=function() {}. Event behavior = function box. Onclick =function(){} is equivalent to assigning a value to the attribute of an element, only one value can be assigned, and the previous value will be overwritten if the subsequent value is assigned. Therefore, dom0-level events can only be bound once. If the binding is repeated, the previous value will be overwritten by the subsequent events, because it is an assignment process, and only one value can be assigned to an attributeCopy the code

Dom0-level events are removed

Element. Event behavior =null; // The event behavior of the element itself is null by default, which can be set back to null. DOM0 events occur during the bubble phaseCopy the code

DOM0 level events are compatible with any browser

Dom2-level event binding

AddEventListener is a public method in the EventEventTarget prototype.'Event type removed from on'The third argument istrueOr is itfalse)
false: The bubble phase occurs by defaulttrue: Capture phase occurs <! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"</div> <script> var box= document.getelementById ('box');
box.addEventListener('click'.function(){
    console.log(1)
})
box.addEventListener('click'.function(){console.log(2)}) // When clicked,1 and 2 output </script> </body> </ HTML > DOM2 level events can bind multiple functions, in the order you bind themCopy the code

The dom2-level event was removed. Procedure

Note: In order to remove the event, it is common to bind the event with a function name instead of <! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"</div> <script> var box= document.getelementById ('box');
function fn(){
    console.log(1);
}
box.addEventListener('click',fn);
box.addEventListener('click'.function(){
    console.log(2)
})
box.removeEventListener('click',fn); //romoveEventListener has two arguments // When clicked, both 1 and 2 output </script> </body> </ HTML >Copy the code

DOM2 level events have compatibility (attachEvent), now Microsoft has given up IE8 and below, so we rarely do it, but we need to do it separately, so we need to make a decision, if there is an addEventListener in Windows, we use addEventLis Tener, if not we don’t use addEventListener

In lower versions of IE, there is no addEventListener. Then in lower versions of IE, use attachEvent binding :attachEvent(). Remove :detachEvent().Copy the code

Dom2-level events can bind multiple functions to the same event behavior in the order in which you bind them

DOM2 level event removes box.removeEventListener(‘click’,fn, Boolean)