(七)事件处理

1.事件捕获与事件冒泡

事件捕获 :事件从顶层元素(document)传播到具体发生事件的元素(Netscape)
事件冒泡 :事件从具体元素传播到顶层元素 (IE)

(七)事件处理_第1张图片
事件流模型

2.事件处理
  1. HTML 事件处理
  1. DOM0 事件处理
  1. DOM2 事件处理
  1. IE事件处理
3.事件对象

1 事件对象:在处理程序(handler)中传入,生命周期为处理期间

event.currentTarget     //处理事件的目标
event.target            //事件的目标DOM
event.type              //事件类型
event.eventPhase        //事件阶段
event.preventDefault()  //取消事件的默认行为
event.stopImmediatePropagation() //立即取消任何捕获或者冒泡行为
event.stopPropagation() //取消冒泡,不再传播事件

2 .IE 事件对象:

event.srcElement     //事件的目标IE
event.cancelBubble() //取消冒泡IE
4.通用的事件监听对象

    var EventUtil = {
        //添加监听
        addHandler:function(ele,handler,type){
            if(ele.addEventListener){
                ele.addEventListener(type,handler,false);
            } else if(ele.attachEvent){
                ele.attachEvent("on"+type,handler);
            } else{
                ele["on"+type] = handler;
            }
        },
        //移除监听
        removeHandler:function(ele,handler,type){
            if(ele.removeEventListener){
                ele.removeEventListener(type,handler,false);
            }else if(ele.detachEvent){
                ele.detachEvent("on"+type,handler);
            }else{
                ele["on"+type] = null;
            }
        },
        //获取事件对象
        getEvent:function(event){
            return event ? event : window.event;
        },
        //获取事件目标
        getTarget: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;
            }
        }
    }

你可能感兴趣的:((七)事件处理)