美文网首页
事件对象

事件对象

作者: IvyAutumn | 来源:发表于2018-12-10 09:19 被阅读0次

    什么是事件对象?在触发DOM上的事件时都会产生一个对象

    事件对象event

    DOM中的事件对象

    (1) type属性用于获取事件类型
    (2) target属性用于获取事件目标
    (3)stopPropagation()方法用于阻止时间冒泡
    (4)preventDefault()方法阻止事件的默认行为

    IE中的事件对象

    (1)type属性用于获取事件类型
    (2)srcElement属性用于获取事件的目标
    (3)cancelBubble属性用于阻止时间冒泡
    设置为true表示阻止冒泡;设置为false表示不阻止冒泡
    (4)returnValue属性用于阻止事件的默认行为
    设置为false表示阻止事件的默认行为
    在代码的时候要注意考虑IE浏览器的兼容性,一般将一些常用行为封装起来

    //跨浏览器的处理方法:封装在一个对象中
    var eventUtil = {
                //添加句柄
                addHandler:function(element, type, handler){
                    if(element.addEventListener){
                        element.addEventListener(type,handler,false)//DOM2级事件处理
                    }else if(element.attachEvent){
                        element.attachEvent('on'+type,handler);//IE浏览器事件处理
                    }else{
                        element['on'+type]=handler;//DOM0级事件处理
                    }
                },
                //删除句柄
                removeHandler:function(element, type, handler){
                    if(element.removeEventListener){
                        element.removeEventListener(type,handler,false)//DOM2级事件处理
                    }else if(element.detachEvent){
                        element.detachEvent('on'+type,handler);//IE浏览器事件处理
                    }else{
                        element['on'+type]=handler;//DOM0级事件处理
                    }
                },
                getEvent:function(event){
                    return event?event:windows.event;
                },
                getType:function(event){
                    return event.type;
                },
                getElement:function(event){
                    return event.target || event.srcElement;
                },
                preventDefault:function(event){
                    if(event.preventDefault){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                stopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                }
    }
    

    相关文章

      网友评论

          本文标题:事件对象

          本文链接:https://www.haomeiwen.com/subject/gnmqhqtx.html