js事件高级应用01（事件绑定、高级拖拽）

最新推荐文章于 2023-07-24 16:56:12 发布

蔡蔡动起来

最新推荐文章于 2023-07-24 16:56:12 发布

阅读量398

点赞数

分类专栏：智能社_js 文章标签：事件绑定高级拖拽

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82710667

版权

智能社_js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件绑定
IE方式
attachEvent(事件名称、函数)，绑定事件处理函数
detachEvent(事件名称、函数)，解除绑定
DOM方式
addEventListener(事件名称，函数，捕获)
removeEventListener(事件名称，函数，捕获)

attachEvent是用来绑定事件的。如果我在一个元素的同一事件上去加两次，会相互覆盖。而绑定就不会出现这种问题。可以同时加好几个函数在同一个事件上。

Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法，使用这个方法，就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是问题是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法，这个方法跟 attachEvent 差不多，也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别，在 attachEvent 方法中，事件是以 “on” 开头的，而在 addEventListener 中，事件没有开头的 “on”，另外 addEventListener 还有第三个参数，一般这个参数指定为 false 就可以了。

兼容性问题：attachEvent(IE) addEventListener(火狐)

<script>
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            //attachEvent(事件名，函数)
            oBtn.addEventListener('click',function(){
                alert('a');
            },false);
            oBtn.addEventListener('click',function(){
                alert('b');
            },false);
            /*oBtn.onclick=function(){
                alert('a');
            }
            oBtn.onclick=function(){
                alert('b');
            }*/
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="点击按钮"/>
</body>

处理兼容性问题：

    
    <script>
        /*window.onload=function(){
            var oBtn=document.getElementById('btn');
            //先出现b再出现a.IE9以下的浏览器执行顺序和你绑定的执行顺序相反，
            if(oBtn.attachEvent){
                oBtn.attachEvent('onclick',function(){
                    alert('a');
                });
                oBtn.attachEvent('onclick',function(){
                    alert('b');
                });
            }else{
                oBtn.addEventListener('click',function(){
                    alert('a');
                },false);
                oBtn.addEventListener('click',function(){
                    alert('b');
                },false);
            }
        }*/
        function myAddEvent(obj,ev,fn){
            if(obj.attachEvent){
                obj.attachEvent('on'+ev,fn);
            }else{
                obj.addEventListener(ev,fn,false);
            }
        }
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            myAddEvent(oBtn,'click',function(){
                alert('a');
            });
            myAddEvent(oBtn,'click',function(){
                alert('b');
            });
        }

    </script>

高级拖拽
复习拖拽原理：距离不变三个事件：down、move、up
限制范围：1.对位置判断（例子1，不能拖出窗口的Div. 例子2，不能拖出指定对象的Div）
2.磁性吸附

//例子2，不能拖出指定对象的Div.
<style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
        #div2{
            width: 700px;
            height: 500px;
            background: #cccccc;
            position: relative;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                //鼠标移动
                document.onmousemove=function(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;

                    if(l<0){
                        l=0;
                    }else if(l>oDiv2.offsetWidth-oDiv.offsetWidth){
                        l=oDiv2.offsetWidth-oDiv.offsetWidth;
                    }
                    if(t<0){
                        t=0;
                    }else if(t>oDiv2.offsetHeight-oDiv.offsetHeight){
                        t=oDiv2.offsetHeight-oDiv.offsetHeight;
                    }

                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';

                }
                //鼠标抬起不动
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
            };
            return false;//火狐下，空div会有bug.加上false则无。
        }
    </script>
</head>
<body>
<div id="div2">
    <div id="div1"></div>
</div>
</body>

//吸附
                    if(l<50){
                        l=0;
                    }else if(l>oDiv2.offsetWidth-oDiv.offsetWidth){
                        l=oDiv2.offsetWidth-oDiv.offsetWidth;
                    }
                    if(t<50){
                        t=0;
                    }else if(t>oDiv2.offsetHeight-oDiv.offsetHeight){
                        t=oDiv2.offsetHeight-oDiv.offsetHeight;
                    }

图片拖拽阻止默认事件
文字选中阻止默认事件 IE下拖动有问题（事件捕获）
与DOM配合（带框拖拽、保留原有位置的拖拽）

当在拖拽的时候，我们不会选中页面中的其他文字。

事件捕获：setCapture()只在IE可用。

return false;//可以解决chrome、ff、IE9下的问题,但是解决不了IE7以下的问题

所以我们要制作一个适用于IE的。

//没加事件捕获之前只有点击按钮才能弹出a。加上事件捕获之后，随便点击一个地方都能弹出a.
<script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            oBtn.onclick=function(){
                alert('a');
            }
            oBtn.setCapture();//事件捕获。作用：把事件都集中到一个按钮身上。
        }
    </script>
</head>
<body>
<input type="button" id="btn1" value="按钮"/>
</body>

加了事件捕获，oDiv.setCapture()；整个网页里面所有的事件都会聚集到一个div身上。

<style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

    </style>
    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                //鼠标移动  之前我们是document.onmousemove
                oDiv.onmousemove=function(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;

                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';

                }
                //鼠标抬起不动.之前我们是document.onmouseup
                //换成document的原因是div太小，拖拽太快，容易鼠标与div脱离。
                oDiv.onmouseup=function(){
                    oDiv.onmousemove=null;
                    oDiv.onmouseup=null;
                }
                oDiv.setCapture();//无论拖拽的多快，div都不会跟不上鼠标
                return false;
            };

        }
    </script>
</head>
<body>
djsakfgjaukdhwuq
    <div id="div1">dwfewfewfwefwefefwef</div>
wdsfregtehrshtefeagregr
</body>

我加了setCapture()之后，文字就得不到事件了。所以在要文字得到事件的时候，取消捕获。

 <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;
                function mouseMove(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';
                }
                function mouseUp(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    if(oDiv.releaseCapture){
                        oDiv.releaseCapture();//在鼠标抬起的时候，释放掉捕获。
                    }
                }

                if(oDiv.setCapture){
                    //IE
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{
                    //chrome
                    document.onmousemove=mouseMove;
                    document.onmouseup=mouseUp;
                }
                return false;//可以解决chrome、ff、IE9下的问题,但是解决不了IE7以下的问题
            };

        }
    </script>

 <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;
                function mouseMove(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';
                }
                function mouseUp(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    if(oDiv.releaseCapture){
                        oDiv.releaseCapture();//在鼠标抬起的时候，释放掉捕获。
                    }
                }

                if(oDiv.setCapture){
                    //IE
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{
                    //chrome
                    document.onmousemove=mouseMove;
                    document.onmouseup=mouseUp;
                }
                return false;//可以解决chrome、ff、IE9下的问题
            };

        }
    </script>