JavaScript 基础事件库拖拽总结

🌙
手机阅读
本文目录结构

基础事件库和拖拽

标准浏览器监听:

oDiv.addEventListener(“click”,fn3); oDiv.addEventListener(“click”,fn4,false);//和上面一样的,不写和写false一样的;

移除的

this.removeEventListener(“click”,fn1,false);//移除

IE浏览器的监听用的是attachEvent;

绑定和移除的方法

var oDiv=document.getElementById("div1");
function bind(ele,type,fn){//绑定
    if(ele.addEventListener){
        ele.addEventListener(type,fn,false);
        //ele.addEventListener(type,fn);//也可以写成这样的
    }else{
        ele.attachEvent("on"+type,fn);
    }
}

/* alert(typeof oDiv.addEventListener);//function

alert(typeof oDiv.attachEvent);//在IE7里面是object*/
function unbind(ele,type,fn){//移除
    if(ele.removeEventListener){
        ele.removeEventListener(type,fn,false);
    }else{
        ele.detachEvent("on"+type,fn)
    }
}

IE兼容性问题:

bind(oDiv,"click",fn1);
bind(oDiv,"click",fn2);
bind(oDiv,"click",fn3);
bind(oDiv,"click",fn4);
bind(oDiv,"click",fn5);
bind(oDiv,"click",fn6);
bind(oDiv,"click",fn7);
bind(oDiv,"click",fn8);
bind(oDiv,"click",fn9);
bind(oDiv,"click",fn10);
/*标准浏览器打印:1,2,3,4,5,6,7,8,9,10
* IE7/8:9,8,7,10,6,5,4,3,2,1
* */
//IE和标准浏览器的区别:
// 1、this不指向被绑定的DOM元素了;
// 2、顺序是乱了,如果少,会是倒序的;
// 3、可以在一个元素上绑定同一个方法;(正常一个方法是不能重复绑定的)

DOM2事件绑定的兼容性总结,IE是指低版本IE

  1. 方法不同,一个是(addEventListener/removeEventListener),IE是(attachEvent/detachEvent)
  2. IE里被绑定上的方法,this关键字指向window;
  3. IE里执行的顺序是混乱的
  4. IE里的方法是可以被重复绑定的;
  5. 事件对象本身,IE是全局的时间对象window.event;其他的是系统自动传的
  6. 事件源:标准浏览器是e.target;IE是srcElement;
  7. 阻止事件的默认行为:标准浏览器是e.preventDefault(),IE是returnValue=false;
  8. 在所有浏览器中,如果用DOM0的方式来绑定,方法里面用return false也可以阻止默认行为的;这个是可以阻止DOM0的,如果是DOM2级的就不可以了
  9. 阻止事件的传播:标准浏览器是e.stopPropagation();IE是cancelBubble=true;
  10. e.pageX,e.pageY,这两个属性IE不支持;
  11. IE不支持捕获,只能支持冒泡;所以标准浏览器绑定和解绑第三个参数是false,第三个参数不写,也是没问题的;

低版本的IE事件,如果超过9个就会混乱了;9个内是倒序的;

**事件的兼容问题都在run里解决好;**以后直接传个e即可;使用也都用标准浏览器的语法;

/*事件兼容性问题,都在run上解决好*/
function run(e){
    e=e||window.event;
    if(!e.target){
        e.target= e.srcElement;
        e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
        e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;
        e.stopPropagation=function(){e.cancelBubble=true;}//阻止事件传播;
        e.preventDefault=function(){e.returnValue=false;}//阻止事件默认行为;
    }
    /*上面是IE不支持的*/
    var a=this["aEvent"+e.type];
    for(var i=0;i< a.length;){
        /*下面是防止数组塌陷的*/
        if(typeof a[i]=="function"){
            //a[i].call(this);//this指向当前被绑定元素;
            a[i].call(this,e);//this后面加e;就解决了e的兼容性问题;因为想this主体传了e;具体的函数就不需要再解决e的兼容了;
            i++;
        }else{
            /*如果是空的,删掉;不删也是可以的*/
            a.splice(i,1);
        }
    }
}

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了