js事件处理(DOM0,DOM2,IE)

事件对象event

一、DOM中的事件对象
1 type属性 event.type获取事件类型
2 target属性 event.target.nodeName获取事件目标,事件是来自哪个元素
3 stopPropagation()阻止事件冒泡
4 preventDefault() 阻止事件的默认行为

二、IE中的事件对象
1 type属性,同上
2 srcElement属性 event.srcElemnt
3 cancelBubble属性 当为true时取消冒泡
4 returnValue属性 当为false时阻止事件的默认行为


//跨浏览器事件处理程序
var  eventUtil={
        //添加句柄
        addHandler:function(element,type,handler){
            if (element.addEventListener) {
                //DOM 2级,chrome,firefox...
                element.addEventListener(type,handler,false);
            } else if(element.attachEvent){
                //IE
                element.attachEvent('on'+type,handler);
            }else{
                //DOM 0级
                element['on'+type]=handler;
            }
        },
        //删除句柄
        removeHandler:function(element,type,handler){
            if (element.removeEventListener) {
                //DOM 2级
                element.removeEventListener(type,handler,false);
            } else if(element.detachEvent){
                //IE
                element.detachEvent('on'+type,handler);
            }else{
                //DOM 0级
                element['on'+type]=null;
            }
        },
        //获取事件
        getEvent:function(event){
            return event?event:window.event;
        },
        //获取事件类型
        getType:function(event){
            return event.type;
        },
        //获取事件来源
        getElement:function(event){
            return event.srcElement||event.target;
        },
        //阻止事件默认行为
        preventDefault:function(event){
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue=false;
            }
        },
        //阻止事件冒泡
        stopPropagation:function(event){
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble=true;
            }
        }
     };
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值