事件的绑定方式

<!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");

    // 赋值式绑定（DOM0级事件绑定）
     obox.onclick = function(){
         console.log(1)
     }
     obox.onclick = function(){
         console.log(2)
//     }
    // 删除赋值式事件绑定
     obox.onclick = null;
    // 常用，没有兼容，简单


    // 监听式绑定（DOM2级事件绑定）
     obox.addEventListener("click",fn1)
     function fn1(){
         console.log(1) //1
     }
     obox.addEventListener("click",function(){
         console.log(2)  //2
     })
    // 通过事件句柄找到原来的事件处理函数，删除
     obox.removeEventListener("click",fn1) //2

    // 兼容IE
     obox.attachEvent("onclick",fn1)
     function fn1(){
         console.log(1)
     }
     obox.attachEvent("onclick",function(){
         console.log(2)
     })
     obox.detachEvent("onclick",fn1)

     console.log(obox.attachEvent)


封装函数
function removeEvent(ele,type,cb){
        if(ele.removeEventListener){
            ele.removeEventListener(type,cb)
        }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;

    // 行为过程：按下之后，移动，再抬起
    obox.addEventListener("mousedown",function(eve){
        // 获取按下的坐标，在按下的事件对象身上
        var e1 = eve || window.event;
        // 为了防止移动过快，鼠标在某一瞬间离开元素，移动事件加给页面
        document.addEventListener("mousemove",move)
        // 因为移动事件在抬起的时候，被删除，所以提前起名
        function move(eve){
            var e = eve || window.event;
            // 计算元素要移动的真正的距离：为鼠标相对于页面的坐标减去按下时相对于元素的坐标
            var l = e.pageX - e1.offsetX;
            var t = e.pageY - e1.offsetY;
            // 边界限定
            if(t < 0){
                t = 0
            }
            if(l < 0){
                l = 0
            }
            if(l > clientW - w){
                l = clientW - w;
            }
            if(t > clientH - h){
                t = clientH - h;
            }

            // 设置位置
            obox.style.left = l + "px"
            obox.style.top = t + "px"
        }
        // 抬起时，删除移动，删除抬起
        document.addEventListener("mouseup",up)
        function up(){
            document.removeEventListener("mousemove",move)
            document.removeEventListener("mouseup",up)
        }
    })

</script>
</html>

posted @ 2019-08-27 17:40 菜鸟小何阅读(201) 评论(0) 编辑收藏举报

刷新页面返回顶部

事件的绑定方式

公告