js的事件绑定与事件的传播顺序

最新推荐文章于 2024-05-12 21:37:16 发布

2333!!!!!

最新推荐文章于 2024-05-12 21:37:16 发布

阅读量404

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122530196

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
        /*    依次为 ①捕获阶段，②目标阶段，③冒泡阶段，
        第一阶段：事件从文档根元素开始逐层向下传递，直到找到事件目标，
        第二阶段：找到事件目标并触发相应的事件，
        第三阶段：从目标逐层向上返回到根节点，
        */
        window.onload=function() {
            var btn = document.getElementById("btn");
            //我的们btn.onclick onclick事件可以理解为是dom的一个属性它可以被赋值事件   但后面的事件会覆盖先前的事件
            btn.addEventListener("click", function () {
                alert(1)
            }, false);
            //这个addEventListene增加监听事件可以为btn这dom附加多个事件,并且是同一类型的事件
            //他的参数是3个 1.普通触发事件onclick去掉on(str)  2.回调函数触发事件执行的函数 (函数)     3.这个函数会不会在捕获阶段执行 (布尔)
            btn.addEventListener("click", function () {
                alert(2)
            }, false);
            btn.addEventListener("click", function () {
                alert(3)
            }, false);
            bind(btn,"click",function(){
                alert("我好了!");
            })
            //成功执行
            /*******************bind函数**************/
            function bind(obj,eventStr,callback){
                //*ie已经死了!!!!不要tmIe
                obj.addEventListener(eventStr,callback,false);
                //attchEvent是Ie8以下的且会使用call函数绑定至对象他的事件参数要加on
                //callback.call.(obj) 将window的函数绑定给obj
            }
            //若我们将addEventListener的第三个参数改为true 那么就会在捕获阶段执行也就是能够冒泡的事件都会直接执行
            //我们的事件先是从最底层捕获然后在目标事件位置触发事件
            //然后再执行冒泡事件
            //但true后就是边捕获边触发了,也可以理解为冒泡事件的提前
        }

  </script>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>