青岛中联优谷

js中的事件冒泡

2018-07-18

青岛网站建设
IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。以下面的 HTML 页面为例:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果你单击了页面中的 <div> 元素,那么这个 click 事件会按照如下顺序传播:
(1) <div>
(2) <body>
(3) <html>
(4) document
也就是说, click 事件首先在 <div> 元素上发生,而这个元素就是我们单击的元素。然后, click
事件沿 DOM 树向上传播,在每一级节点上都会发生,直至传播到 document 对象。如图展示了事件
冒泡的过程。
所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒
泡会跳过 <html> 元素(从 <body> 直接跳到 document )。IE9、Firefox、Chrome 和 Safari 则将事件一直
冒泡到 window 对象。