Binding way events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width:100px;height:100px;
            background: red
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>var obox = document.querySelector(".box");() {function
     obox.onclick =assignment bindings (DOM0 level event binding)//
    

    
         console.log (1 ) 
     } 
     obox.onclick = function () { 
         console.log ( 2 )
 //      } 
    // delete the assignment type event binding 
     obox.onclick = null ;
     // common, there is no compatibility, simple 


    // listening bindings (DOM2 binding level events) 
     obox.addEventListener ( "the Click" , Fn1)
      function Fn1 () { 
         the console.log ( . 1) // . 1 
     } 
     obox.addEventListener ( "the Click", function () { 
         the console.log ( 2)   // 2 
     })
     // find the event handler by the original event handlers, remove 
     obox.removeEventListener ( "the Click", Fn1) // 2 

    // compatibility IEs 
     obox.attachEvent ( "the onclick" , Fn1)
      function Fn1 () { 
         the console.log ( . 1 ) 
     } 
     obox.attachEvent ( "the onclick", function () { 
         the console.log ( 2 ) 
     }) 
     obox.detachEvent ( "the onclick" , Fn1) 

     the console.log (obox.attachEvent) 


wrapper function
 function removeEvent (ELE, type , CB) {
         IF (ele.removeEventListener) { 
            ele.removeEventListener (type, CB) 
        } the else if(ele.detachEvent){
            ele.detachEvent("on"+type,cb)
        }else{
            ele["on"+type] = null;
        }
    }

    function addEvent(ele,type,cb){
        if(ele.addEventListener){
            ele.addEventListener(type,cb)
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,cb)
        }else{
            ele["on"+type] = cb;
        }
    }

调用函数
     addEvent(obox,"click",fn1)
     function fn1(){
         console.log(1)  //1
     }
     addEvent(obox,"click",fn2)
     function fn2(){ console.log(2) //2  }

　　　removeEvent(obox,"click",fn1)
　　　removeEvent(obox,"click",fn2)

</script> </html>

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width:100px;height:100px;
            background: red;
            position: absolute;left:0;top:0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var obox = document.querySelector(".box");
    var clientW =document.documentElement.clientWidth;
     var clientH = document.documentElement.clientHeight;
     var W = obox.offsetWidth;
     var H = obox.offsetHeight; 

    // course of action: After pressing, moving, and then lift 
    obox.addEventListener ( "mousedown" , function (Eve) {
         // Get down coordinate, the event object in the pressed body 
        var E1 = Eve || the window.event;
         // to prevent excessive movement of the mouse leaves the element at a certain moment, the mobile event plus to page 
        document.addEventListener ( "mouseMove" , the move)
         // since moving event when lifted, is deleted, so named in advance 
        function the move (Eve) {
             var E = Eve ||the window.event;
             // calculate the element to be moved from the true: with respect to the coordinates of the element when the mouse coordinates relative to the page pressing subtracting 
            var L = e.pageX - e1.offsetX;
             var T = e.pageY - e1.offsetY;
             // boundary defining 
            IF (T <0 ) { 
                T = 0 
            } 
            IF (L <0 ) { 
                L = 0 
            } 
            IF (L> clientW - W) { 
                L = clientW - W; 
            } 
            IF (T> clientH - H) { 
                T = clientH - H;
            } 

            // set the position 
            obox.style.left = L + "PX" 
            obox.style.top = T + "PX" 
        } 
        // is lifted, moved to delete, remove lift 
        document.addEventListener ( "mouseUp" , up)
         function up () { 
            document.removeEventListener ( "mouseMove" , Move) 
            document.removeEventListener ( "mouseUp" , up) 
        } 
    })

 </ Script> 
</ HTML>

Guess you like