JS事件的绑定和传播_js事件里可以在发送事件吗-CSDN博客

本文链接：https://blog.csdn.net/william_jzy/article/details/79868434

事件的绑定

使用对象.事件 = 函数来绑定响应函数。
它只能同时为一个元素的一个事件绑定一个响应函数，而不能绑定多个，一旦绑定后，后面的响应函数将会覆盖前面的。

<script type="text/javascript">
window.onload = function(){
    var btn01 = document.getElementById("btn01");
    btn01.onclick = function(){
        console.log("哈哈哈~");
    };
    btn01.onclick = function(){
        console.log("hhhhhhh");
    };
};
</script>
<!-- 输出hhhhhhh-->

这是可以使用addEventListener()来绑定函数
他需要三个参数：1）事件的字符串，不要on （例如onclick，写成click）
2）回调函数
3）是否在捕获阶段触发事件，一般都传false
eg: btn.addEventListner("click" , function(){} , false );
当事件触发时，响应函数会按照函数的绑定顺序执行
但是IE8及以下浏览器不支持
可以使用attachEvent()
两个参数：1）事件字符串，要on
2）回调函数
他是先绑定，后执行。执行顺序与addEventListener()相反，它支持IE8及以下浏览器。

创建一个bind函数，来兼容所有浏览器

<script type="text/javascript">
window.onload = function(){
    var btn01 = document.getElementById("btn01");
    //三个参数：obj 要绑定事件的对象，eventStr 事件的字符串（不要on），callback 回调函数
    function bind( obj , eventStr , callback){
        if(obj.addEventListener){
            obj.addEventListener(eventStr , callback , false);
        }else{
            obj.attachEvent("on"+eventStr , function(){
                /*
                * addEventListener中this是绑定事件的对象，
                * attachEvent中this是window
                * 需要统一两个方法中的this
                * 在匿名函数中调用回调函数，改变attachEvent中的this
                */
                callback.call(obj);
            });
        }
    };
    bind(btn01 , "click" , function(){
        console.log("hi~");
    });
    bind(btn01 , "click" , function(){
        alert("hello~");
    });
};
</script>
<!-- hi~ hello~ -->

事件的传播

W3C将事件的传播分为三个阶段，
1）捕获阶段：在捕获阶段时，从最外层的祖先元素开始向目标元素进行事件的捕获，淡漠人不会触发事件
2）目标阶段：事件捕获到目标元素，捕获结束，开始在目标元素上触发事件
3）冒泡阶段：时间从目标元素开始向祖先元素传递，依次触发祖先元祖上的事件

如果希望在捕获阶段就触发事件，可将addEventListener()中的第三个参数设为true，但是注意IE8及以下浏览器没有捕获阶段

拖拽页面

setCapture() 对鼠标按下相关的事件进行捕获，（只有IE支持），当调用一个元素的setCapture()方法后，这个元素会把下一次所有鼠标按下的相关事件捕获到自身上
releaseCapture() 取消捕获

注意：在网页中，拖拽网页中的内容时，浏览器默认会去搜索引擎中搜索选中的内容，这时会导致拖拽功能异常。如果不希望有该行为，可以通过 renturn false 来取消默认行为，但是在IE8中不起作用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                //获取box1函数对象
                var box1 = document.getElementById("box1");

                drag(box1);

                function drag(obj){
                    //创建box1的按下鼠标响应函数
                    obj.onmousedown = function(event){
                        //开启鼠标按下的捕获
                        box1.setCapture && box1.setCapture();

                        //div的偏移量  鼠标.clientX - box1.offsetLeft
                        //             鼠标.clientY - box1.offsetTop
                        var ol = event.clientX - obj.offsetLeft;
                        var ot = event.clientY - obj.offsetTop;

                        //创建document的鼠标移动
                        document.onmousemove = function(event){
                            event = event || window.event;
                            //获取鼠标所在位置的坐标
                            var x = event.clientX - ol;
                            var y = event.clientY - ot;
                            //设置box1的位置
                            obj.style.left = x + "px";
                            obj.style.top = y + "px";

                        };
                        //创建document鼠标松开响应函数
                        document.onmouseup = function(){
                            //取消鼠标移动函数
                            document.onmousemove = null;
                            //取消鼠标松开函数
                            document.onmouseup = null;
                            //取消鼠标的捕获
                            obj.releaseCapture();
                        };
                    };
                };
            };

        </script>

    </head>
    <body>
        <div id="box1"></div>
    </body>
</html>

这里写图片描述