js事件冒泡&事件捕获&事件委托_onclick 获取event-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_67642008/article/details/125577172

一、event 对象是用来获取事物的详细信息：如鼠标事件，键盘事件；

获取event对象（兼容性写法）

o=e||event;

document.οnclick=function(e){

o=e||event;

alert(o.clientX+','+o.clientY);

}

<body>
    <h1></h1>
    <script>
        //鼠标点击事件 event 对象
        var h1 = document.querySelector("h1")
        document.onclick = function (e) {
            o = e || event;
            h1.innerHTML = o.clientX + '' + o.clientY
        }


        //键盘事件的 event 对象
        document.onkeydown = function (e) {
            var o = e || event
            console.log(o);
        }
    </script>
</body>

二、事件冒泡和捕获

1.事件冒泡从下至上。当给父子元素的同一事件绑定方法的时候（比如click点击事件），触发子元素身上的事件，执行完毕之后，也会触发父级元素相同的事件。

2. 事件捕获：从上至下到指定元素。当出发子元素身上到事件的时候，先触发父元素，然后再传递给子元素。

3. addEventListener中有三个属性，第三个属性是布尔值。false为事件冒泡，true 为事件捕获；

注：在捕获和冒泡事件同时存在时，先执行捕获事件，再执行冒泡事件；

<body>
    <div class="s1">
        1
        <div class="s2">
            2
            <div class="s3">
                3
            </div>
        </div>
    </div>
    <script>
        var s1 = document.querySelector(".s1");
        var s2 = document.querySelector(".s2");
        var s3 = document.querySelector(".s3");
        //window.event.cancelBubble = true （谷歌，IE8兼容，火狐不支持）
        s1.addEventListener("click", function (e) {
            console.log("s1捕获事件触发");
        }, true)
       
        s1.addEventListener("click", function (e) {
            console.log("s1冒泡事件触发");
        }, false) //第三个参数默认为false，指定事件流为事件冒泡，设为为true时指定为事件捕获。
       
        s2.addEventListener("click", function (e) {
            console.log("s2捕获事件触发");
        }, true)

        s2.addEventListener("click", function (e) {
            console.log("s2冒泡事件触发");
        }, false)

        s3.addEventListener("click", function (e) {
            console.log("s3捕获事件触发");
        }, true)

        s3.addEventListener("click", function (e) {
            console.log("s3冒泡事件触发");
            e.stopPropagation();
        }, false)
            //返回
            s1捕获事件触发
            s2捕获事件触发
            s3捕获事件触发
            s3冒泡事件触发

    </script>
</body>

三、阻止事件冒泡

非IE下：event.stopPropagation();//在ie8,7,5版本不支持

IE和谷歌下：event.cancelBubble=true;

四、阻止事件默认行为

1.return false; （可以兼容谷歌和ie各版本）；

2.e.preventDefault();（在IE8及以下不支持）；

3.a 链接取消默认跳转的方法：1.href = "javascript: ;"

2.href = "javascript:void(0);"

<body>
    <a href="">我是链接</a>
    <script>
        /* 阻止默认行为的方法 */
        var a = document.querySelector("a");
        // a.onclick = function () {
        //     //这里无法显示打印文字
        //     document.write("我是点击事件安排我打印的")
        // }

        /* 阻止默认事件方法一 */
        //1.href = "javascript: ;"
        //2.href = "javascript:void(0);"
        // a.onclick = function () {
        //     //这里可以打印
        //     document.write("我是点击事件安排我打印的")
        // }

        //js中阻止默认事件
        //3.e.preventDefault();阻止默认事件
        // a.onclick = function (e) {
        //     //这里可以打印
        //     //e.preventDefault();在IE8及以下不支持
        //     e.preventDefault();
        //     document.write("我是点击事件安排我打印的")
        // }

        //4.return false;阻止默认事件
        // a.onclick = function () {
        //     //这里无法显示打印文字
        //     document.write("我是点击事件安排我打印的")
        //     //return false 可以兼容谷歌和ie各版本
        //     return false;
        // }

        document.oncontextmenu = function (e) {
            //阻止鼠标右击事件
            //此时鼠标右击不在出现默认的下拉菜单
            e.preventDefault();
        }
    </script>
</body>

五、事件委托

事件委托的原理是，给父盒子添加事件监听，通过事件冒泡来影响每一个子盒子；

这种简单而优雅的事件注册方式是基于事件传播过程中，逐层冒泡总能被祖先节点捕获。

举例看下：给父元素ul绑定了onmouseover事件，使用事件委托可以使得每一个子元素li都可以很好的执行 onmouseover事件。可以很好的替代给li循环绑定 onmouseover事件；

//CSS部分
<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            width: 100px;
            height: 50px;
            color: #c4cfcb;
            text-align: center;
            line-height: 50px;
        }

        ul {
            display: none;
            position: absolute;
            left: 100px;
            top: 100px;
            border: 3px solid #c3cb71;
        }

        .sty {
            transition: linear 0.2s all;
        }
    </style>
//JS部分
 <body>
    <ul>
        <li>保存</li>
        <li>收藏</li>
        <li>打开</li>
        <li>开门</li>
    </ul>
    <script>
        var lis = document.querySelectorAll("li")
        var ul = document.querySelector("ul")
        document.oncontextmenu = function (e) {
            e.preventDefault();
            var x = e.clientX;
            var y = e.clientY;
            console.log(x, y);
            ul.style.left = x + "px";
            ul.style.top = y + "px";
            ul.style.display = "block";
        }
        //第二种：事件委托
        ul.onmouseover = function (e) {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.background = "#fff ";
            }
            //e.target 可以获得当前元素的事件
            //事件委托的原理是，给父盒子添加事件监听，通过事件冒泡来影响每一个子盒子
            e.target.style.background = "#ce93d8";
            e.target.classList.add("sty");
        }

        //第一种：循环绑定事件
        for (let j = 0; j < lis.length; j++) {
            lis[j].onmouseover = function () {
                console.log(1);
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.background = "#fff ";
                }
                this.style.background = "#ce93d8"
                this.classList.add("sty");
            }
        }

        document.onclick = function () {
            ul.style.display = "none"
        }
    </script>
</body>