DOM0 event and DOM2 event

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:100px;
            height:100px;
            background: # 000;
        }
    </style>
</head>
<body>
<div id="box"></div> <script> // DOM0 level events; If you bind two methods to the same event behavior binding for the same element, the later bound method overrides the previous one. var box = document.getElementById("box");
   /* box.onclick = function () {
        console.log(1);
    }
    box.onclick = function() { console.log(2); } * /function fn() {
        console.log(this);
        console.log(1);
    }
    function fn2() { console.log(2); } // DOM2 level event binding // addEventListener: add listener of event // addEventListener: parameter 1): event type parameter 2): listener parameter 3): Dom2-level event binding: multiple methods can be bound to the same event behavior of the same element; Who binds first who executes first; // The same event behavior of the same element cannot be repeatedly bound to the same method; box.addEventListener("click",fn,false); //falseThe bubble phase of the event executes box.addeventListener ("click",fn2,false); //true: Capture phase execution of the event; // 2.attachEvent; // Parameter 1: event behavior with on // Parameter 2: function to bind; /* box.attachEvent("onclick",fn)
    box.attachEvent("onclick",fn)*/ / 1. The attachEvent binding's event methods are in reverse order; // 2. Duplicate binding problem; You can bind the same method to the same event on the same element; // 3. This refers to the window, not to the bound element; </script> </body> </html>Copy the code