事件模型：事件冒泡、事件冒泡、事件委托

来源：互联网发布：android安装linux系统编辑：程序博客网时间：2024/06/13 04:45

事件冒泡：IE的事件流叫做事件冒泡，即事件开始由最具体的元素（文档中嵌套层次最深的哪个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

举例：

<!DOCTYPE html>

<html>

<head>

<title>Event Bubbling Example</title>

</head>

<body>

<div id = "myClick">click me</div>

</body>

</html>

如果单击div元素，则事件的传播顺序：

1）div

2）body

3）html

4）document

事件捕获：思想是不太具体的节点应该更早的接收事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。

如果拿上面的例子来说，事件捕获的事件触发顺序为：

1）document

2）html

3）body

4）div

由于老版的浏览器不支持，因此很少使用事件捕获。放心使用事件冒泡。

事件委托：针对“事件处理程序过多”问题。利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

eg：

var list = document.getELementById("muLinks"); //获取ul

EventUtil.addHandler(list,"click",function(event){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

switch(target.id){

case "dosomething":

......

break;

case "sayHi":

...

break;

}

})

与传统做法相比优点：

1.document对象很快就可以访问，而且可以在页面生命周期的任何时间点上为它添加事件处理程序（无需等待DOMContentLoaded或load事件）。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。

2.在页面中设置事件处理程序的事件减少。只添加一个事件处理程序所需的DOM引用更少，所花时间更少。

3.整个页面占用的内存空间更少。

0 0