JS事件高级应用-1

本文探讨了在不同浏览器下如何使用事件绑定方法,包括attachEvent和addEventListener,并通过封装函数实现兼容性。同时,详细介绍了如何利用事件绑定实现元素的拖拽功能,解决了在拖拽过程中可能遇到的文字选择问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个事件可以绑定多个函数语句
一、同一个元素的同一个事件会覆盖,而绑定不会。
attachEvent(‘ on事件名 ’,执行语句);ie下
addEventListener(‘ 事件名’,执行语句,false);谷歌chrome

兼容函数封装

function myAddEvent(obj,ev,fn){
    if(obj.attachEvent){
    obj.attachEvent('0n'+ev,fn);
        }else{
        obj.addEventListener(ev,fn,false);
        }
}

二、绑定解除
detachEvent(事件名,执行语句)

实例1:高级拖拽-1
磁性吸附
问题:当页面中和div中有文字,在拖动的过程中会选中文字。

三、事件捕获(只有ie下才有)
div.setCapture 页面上的所有的事件都会集中在这个div中
div.releaseCapture释放事件捕获

高级拖拽-1 (兼容IE和Chrome、火狐,封装方法)

 var div1 = document.getElementById('div1');
 var disX =0,
     disY = 0;

    div1.onmousedown = function(e){
        var oEvent = e ||event;
        disX = oEvent.clientX - div1.offsetLeft;
        disY = oEvent.clientY - div1.offsetTop;


        if(div1.setCapture){
            // IE下
            div1.onmousemove= mouseMove;

            div1.onmouseup = function(){//
                this.onmousemove= null;
                this.onmouseup = null;

                this.releaseCapture();//鼠标松开的时候,捕获也取消,不然页面中其他标签的元素无法执行事件
            };
            div1.setCapture();//事件捕获

            }else{
                //chrome、火狐
                document.onmousemove= mouseMove; //函数封装成了mouseMove

                document.onmouseup = function(){//
                        this.onmousemove= null;
                        this.onmouseup = null;                  
                };
            }               
    };

     function mouseMove(e){
    var oEvent = e ||event;
    var l = oEvent.clientX-disX;
    var t = oEvent.clientY-disY;

    if( l<0){
        l = 0;
    }else if(l> document.documentElement.clientWidth -div1.offsetWidth){
        l= document.documentElement.clientWidth -div1.offsetWidth;
    }
    if(t<0){
        t= 0;
    }else if(t> document.documentElement.clientHeight -div1.offsetHeight){
        t=document.documentElement.clientHeight -div1.offsetHeight;
    }
    div1.style.left=l+'px';
    div1.style.top= t+'px';
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值