事件综述

最新推荐文章于 2022-04-04 16:44:49 发布

转载最新推荐文章于 2022-04-04 16:44:49 发布 · 120 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pcd12321/p/5222370.html

本文深入解析了事件流的三个阶段，并提供了在不同浏览器中兼容性添加和移除事件的方法。通过实例展示了如何阻止事件冒泡或捕获，以及如何在事件处理中使用event对象和目标对象。此外，文章还介绍了如何在各种浏览器中实现事件监听的兼容性，包括添加和移除事件的函数，以及事件监听参数的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

三. 移除事件

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

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。

转载于:https://www.cnblogs.com/pcd12321/p/5222370.html