事件综述

Posted 2020-06-17

一. 事件流的三个阶段：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。