js事件传播机制

最新推荐文章于 2023-07-06 20:15:18 发布

请问大家代码怎么敲

最新推荐文章于 2023-07-06 20:15:18 发布

阅读量89

点赞数

分类专栏： js javaScript

本文链接：https://blog.csdn.net/liumuye88888/article/details/115679756

版权

js 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javaScript

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #box1 {
            width: 300px;
            height: 300px;background-color: yellow;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: violet;
        }
        #box3{
            width: 150px;
            height: 150px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    
</body>
<script>
    window.onload = function () {
        var box1 = document.getElementById("#box1")
        var box2 = document.getElementById("#box2")
        var box3 = document.getElementById("#box3")
    }

    /*
    事件的传播
        关于事件的传播网景公司和微软有不同的理解
        微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上触发(事件的冒泡)
        网景公司认为是由外向内传播的,也就是当前事件触发时,应该先触发当前元素最外层的祖先元素的事件,然后再向内传播给后代元素(事件的捕获)
        W3C综合了两个公司的方案,将事件传播分成了三个阶段
        1.捕获阶段
            -在捕获阶段从最外层的祖先元素,向目标元素进行事件捕获,但是默认此时不会触发事件
        2.目标阶段
            -事件捕获到目标元素,捕获结束开始在目标元素上触发事件
        3.冒泡阶段
            -事件从目标阶段向他的祖先元素传递,依次触发祖先元素上的事件

        -如果希望在捕获阶段就触发事件,可以将addEventListener的第三个参数设置为true
        一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false

        IE8及以下浏览器没有捕获阶段
    */

    bind(box1,"click",function(){
        alert("box1的响应函数")
    })
    bind(box2,"click",function(){
        alert("box2的响应函数")
    })
    bind(box3,"click",function(){
        alert("box3的响应函数")
    })

            /*
        定义一个函数,用来为指定元素绑定响应函数
        addEventListener()中的this,是绑定事件的对象
        attachEvent()中的this,是window
        要统一两个方法this
        
        参数
            obj要绑定事件的对象
            eventStr事件的字符串
            callback回调函数
        */
    function bind(obj,eventStr,callback){
        //IE8及以下浏览器没有addEventListener
        if(obj.addEventListener){
            //大部分浏览器可以使用
            obj.addEventListener(eventStr,callback,false)
        }else{
            // IE8及以下浏览器
            obj.attachEvent("on"+eventStr,function(){
                    callback.call(obj)
            })
        }
    }
</script>
</html>

请问大家代码怎么敲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js事件传播机制

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1 {
复制链接

扫一扫