DOM-BOM-EVENT（7）

7.事件深入

7.1.事件捕获

事件流分为事件冒泡和事件捕获两种，事件冒泡指事件从里往外传播，而事件捕获刚好相反，指事件从外向內传播

<!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>
        #box1{
             600px;
            height: 400px;
            background-color: black;
            margin: 100px auto;
            border: 1px solid
        }
        #box2{
             400px;
            height: 200px;
            margin: 100px auto;
            background-color: orangered;
            border: 1px solid
        }
        #box3{
             200px;
            height: 100px;
            margin: 50px auto;
            background-color: #009f95
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        var oBox1 = document.getElementById("box1")
        var oBox2 = document.getElementById("box2")
        var oBox3 = document.getElementById("box3")

        function fn(){
            alert(this.id)
        }

        oBox1.onclick = fn;
        oBox2.onclick = fn;
        oBox3.onclick = fn;

        // 事件绑定的另外一种形式
        // addEventListener 第一个参数是 事件名称，第二个参数是事件处理函数，第三个参数表示 是否捕获
        // true表示捕获  false表示不捕获，捕获就是冒泡
        // 下面是事件冒泡的写法
        // oBox1.addEventListener('click',fn,false)
        // oBox2.addEventListener('click',fn,false)
        // oBox3.addEventListener('click',fn,false)
        // 下面是事件捕获的写法
        oBox1.addEventListener('click',fn,true)
        oBox2.addEventListener('click',fn,true)
        oBox3.addEventListener('click',fn,true)

    </script>
</body>
</html>

7.2.事件绑定形式总结

第一种写法，直接绑定在元素身上

 <div id="box" onclick="fn(this)"></div>
<script>
    function fn(obj){
        alert(obj.id)
    }
</script>

第二种写法对象.事件 = 事件处理函数

 <div id="box" ></div>
<script>
    var oBox = document.getElementById("box")
    oBox.onclick = function(){
        alert(this.id)
    }
</script>

注意：这种写法有个问题就是，如果同时绑定两个事件处理函数，后面的会把前面的覆盖,例如：

 <div id="box" ></div>
<script>
    var oBox = document.getElementById("box")
    oBox.onclick = function(){
        alert(this.id)
    }
    oBox.onclick = function(){
        alert("nodeing.com")
    }
</script>

第三种写法：addEventListener

<div id="box" ></div>
<script>
    var oBox = document.getElementById("box")
    
    oBox.addEventListener("click", function(){
        alert(this.id)
    }, false)

    oBox.addEventListener('click', function(){
        alert("nodeing.com")
    }, false)

</script>

注意：这种写法在ie上有兼容性问题，因此，可以封装一个兼容性处理函数

function addEvent(obj, type, fn){
    if(obj.addEventListener){
        obj.addEventListener(type, fn, false);
    } else if(obj.attachEvent){
        obj.attachEvent('on' + type, fn);
    } else {
        obj['on' + type] = fn;
    }
}

7.3.事件取消

function removeEvent(obj, type, fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type, fn, false);
    } else if(obj.detachEvent){
        obj.detachEvent('on' + type, fn);
    } else {
        obj['on' + type] = null;
    }
}

7.4.事件默认行为

如果是通过对象.onclick = fn 这种形式来绑定的，可以直接在事件处理函数中return false来取消

<!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{
            height: 200px;
             100px;
            background-color: orangered;
            position: absolute;
            display: none
        }
    </style>
</head>
<body>
    <div id="box" ></div>
    <script>
        var oBox = document.getElementById("box")
        document.oncontextmenu = function(ev){
            var ev = ev || event
            oBox.style.display = "block"
            oBox.style.left = ev.clientX + "px"
            oBox.style.top = ev.clientY + "px"
            // 取消事件默认行为
            return false
        }

        document.onclick = function(){
            oBox.style.display = "none"
        }

    </script>
</body>
</html>

如果是通过addEventListener这种形式来绑定的，需要通过 ev.preventDefault()这种形式来取消

document.addEventListener("contextmenu", function(ev){
    var ev = ev || event
    oBox.style.display = "block"
    oBox.style.left = ev.clientX + "px"
    oBox.style.top = ev.clientY + "px"
    // return false
    ev.preventDefault()
}, false)

螺钉课堂视频课程地址：http://edu.nodeing.com