事件综述

一. 事件流的三个阶段：1.捕获阶段。2.目标阶段。3.冒泡阶段。IE8之前不支持捕获。

二. 添加事件如何兼容所有浏览器：

function addHandler(element, type, handler)
{
if(element.addEventListener)
{
element.addEventListener(type, handler, false);//IE9、ff、sa、op、ch
}else if (element.attachEvent)
{
element.attachEvent("on" + type, handler);//IE、op
}else
{
element["on" + type] = handle;
}
}

注：element["on" + type] = handle支持所有浏览器，但是当按钮添加多个相同的时间时会覆盖，element.addEventListener(type, handler, false)与element.attachEvent("on" + type, handler)不会。

三. 移除事件

function removeHandler(element, type, handler)
{
if(element.removeEventListener)
{
element.removeEventListener(type, handler, false);//IE9、ff、sa、op、ch
}else if (element.detachEvent)
{
element.detachEvent("on" + type, handler);//IE、op
}else
{
element["on" + type] = null;
}
}

四. 阻止事件冒泡或捕获：

var oHome = document.getElementById("home");
var oDiv1 = document.getElementById("div1");
addHandler(oHome, "click", function() {
alert("home");
})
addHandler(oDiv1, "click", function(ev) {
var oEvent = ev||window.event;
alert("div");
stopPropagation(oEvent);
})

function stopPropagation(event)

{
if(event.stopPropagation)
{
event.stopPropagation();
}else
{
event.cancelBubble = true;
}
}

阻止冒泡stopPropagation添加在oDiv，阻止捕获stopPropagation添加在oHome。

五. addEventListener中的参数false代表冒泡，true代表捕获。

六. addEventListener中的type为click，attachEvent中的type为onclick。

七. event对象：

function getEvent(event)
{
return event || window.event;
}

window.event 只能在IE下运行，而不能在Firefox下运行，使用event对象来阻止事件冒泡与阻止默认事件。

八. 目标对象：

function getTarget(event)
{
return event.target || event.srcElement;
}

九. target与currentTarget的区别：

例div2中包含div1，俩者均添加事件，

当点击div1时，div1的事件的target指向div1，div1的事件的currentTarget指向div2,

div2的事件的target指向div2,div2的事件的currentTarget指向div2；

当点击div2时，div2的事件的target指向div2，div2的事件的currentTarget指向div2。