事件对象

2018-12-10  本文已影响0人  IvyAutumn

什么是事件对象?在触发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;
                }
            }
}
上一篇 下一篇

猜你喜欢

热点阅读