事件基础（高程版）

作者：zccst

2014-5-4
一、事件流
标准：DOM事件流中，实际的目标在捕获阶段不会接收到事件。即捕获从document到body就停止了。
在处于目标阶段，事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。
实际：在捕获阶段会涉及，结果有两个机会在目标对象上操作事件。



二、事件处理程序（事件监听器）
事件处理程序：HTML，DOM0级，DOM2级

HTML：<input type="button" value="ClickMe" onclick="alert('Clicked')" />需转义特殊字符

缺点：1)先调用后解析会报错；2）作用域链有浏览器差异性；3）html和js耦合较严重。
DOM0级：var btn = document.; btn.onclick=function(){}; 冒泡阶段处理，删除用btn.onclick=null即可；
DOM2级：addEventListener("click",function(){},true);//true在捕获阶段，false在冒泡阶段
好处：可以添加多个事件处理程序
removeEventListener();移除，但无法移除匿名函数，如果想移除需写命名函数



IE事件处理程序：
attachEvent("onclick",function(){}). IE8及更早版本，只支持事件冒泡

与DOM0级事件不同的是DOM0在所属元素的作用域内运行；在attachEvent()方法情况下，在全局作用域中运行，this等于window

var btn = document.getElementById("myBtn");

btn.attachEvent("click",function(){ alert ( this == window); });

也可以添加多个，不同的是执行顺序，与标准正好相反（后添加先执行）
detachEvent也不能移除匿名函数

注：支持IE事件处理程序的浏览器有IE何Opera。



跨浏览器，只需关注冒泡阶段
1，addHander(ele,type,handler) 视情况分别使用DOM0级、DOM2级防腐或IE防腐来添加事件

var EventUtil = {
    addHandler:function(elem,type,handler){
        if(elem,addEventListener){
            elem.addEventListener(type, handler, false);
        }else if(elem.attachEvent){
            elem.attachEvent("on"+type, handler);
        }else{
            elem["on"+type] = handler;
        }
    },
    removeHandler:function(elem,type,handler){
    　　if(elem.removeEventListener){
　　　　　　elem.removeEventListener(type, handler, false);
　　　　}else if(elem.detachEvent){
　　　　　　elem.detachEvent("on"+type, handler);
　　　　}else{
　　　　　　ele["on"+type] = null;
　　　　}

    }
}

这两个方法会先检测是否存在DOM2级，如果是IE浏览器，最后一种可能是DOM0级方法。

使用：
var btn = document.
var handler = function(){};
EventUtil.addHandler(btn,'click',handler);



三、事件对象

<input type="button" value="ClickMe" onclick="alert(event.type)" />
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
　　alert(event.type);//"click"
};
btn.addEventListener("click",function(event){
　　alert(event.type);//"click"
}, false);

1，标准事件对象
event共有的成员：bubbles,cancelable（是否可以取消冒泡）,currentTarget,defaultPrevented,preventDefault(),stopPropagation,target,type等

如果直接将事件处理程序指定给了目标元素，则this == currentTarget == target（currentTarget是绑定事件处理程序的对象）

如果事件处理程序存在于按钮的父节点中，则三者不相同。this和currentTarget指向父元素（target始终指向自身）

preventDefault() 阻止默认行为。比如a的默认行为是点击时导航到href指定的URL。 var link = document; link.onclick=function(e){e.preventDefault();}
stopPropagation() 停止冒泡
eventPhase   1捕获阶段，2处于目标对象，3处于冒泡阶段。event.eventPhase

2，IE事件对象

cancelBubble, returnValue, srcElement, type
DOM0级：window.event
DOM2级：event

preventDefault() = returnValue;//（默认TRUE，设置FALSE可以取消事件的默认行为）
stopPropagation() = cancelBubble;//（默认FALSE，设置TRUE可以取消冒泡）
target = srcElement

var btn = document.getElementById("myBtn");
btn.onclick=function(){
　　//alert(window.event.srcElement === this);//TRUE，DOM0级srcElement与this相同
}
btn.attachEvent("onclick",function(event){
　　alert(event.srcElement === this);//FALSE，DOM1级两者不相同
});

但DOM标准中是TRUE

btn.addEventListener("click",function(event){
　　alert(event.target === this);//TRUE
　　alert(event.currentTarget === this);//TRUE
})

3，跨浏览器事件对象
四个函数：

var UtilEvent = {
    addHandler:function(elem,type,handler){},
    removeHandler:function(elem,type,handler){},
    //添加四个新方法
    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;
        }
    }
};

实际使用的时候

btn.onclick=function(){
　　event = UtilEvent.getEvent(event);//先用getTarget
　　var target = EventUtil.getTarget(event);

　　EventUtil.preventDefault(event);
}

四、事件类型
DOM3规定：
UI： load,unload,abort,error,select,resize,scroll
焦点：blur,focus,focusin/focusout（冒泡）
鼠标/滚轮 除了mouseenter/mouseleave不冒泡，其他都冒泡。顺序：down-up-click-down-up-click-db
ClinetX/ClientY所有浏览器都支持
pageX/pageY页面本身的左边和顶边计算的，而非浏览器。没有页面滚动时，两者相同。I8及更早不支持page
ScreenX/ScreenY屏幕坐标
相关元素：mouseover和mouseout，配对出现的。
键盘/文本：keydown,keypress,keyup。字符键down-press-up，非字符键down-up
合成事件
变动事件：删除节点，添加节点
HTML5事件：context，beforeunload
设备事件：
触摸与手势事件：touchstart,touchmove,touchend

五、内存和性能
1，事件委托
2，移除事件处理程序 btn.onclick=null, onunload事件移除所有事件处理程序


如果您觉得本文的内容对您的学习有所帮助，您可以微信：