事件冒泡:
U7h易塔云建站-模板下载,web开发资源,技术博客IE的事件流叫
事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的某个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。说人话,就好比是你捕鱼吗?冒泡就是鱼在深处,喘了一口气,气泡一点点往上,最后传到你眼里,看见那个位置是有有鱼的,这个过程就是一个事件冒泡。
<!DOCTYPE html>U7h易塔云建站-模板下载,web开发资源,技术博客
<html lang="en">U7h易塔云建站-模板下载,web开发资源,技术博客
<head>U7h易塔云建站-模板下载,web开发资源,技术博客
<title>Document</title>U7h易塔云建站-模板下载,web开发资源,技术博客
</head>U7h易塔云建站-模板下载,web开发资源,技术博客
<body>U7h易塔云建站-模板下载,web开发资源,技术博客
<div id="myDiv">点击文本</div>U7h易塔云建站-模板下载,web开发资源,技术博客
</body>U7h易塔云建站-模板下载,web开发资源,技术博客
</html>
如果点击页面中的<div>元素,那么这个click事件会按照如下顺序传播:
U7h易塔云建站-模板下载,web开发资源,技术博客 ①:text
U7h易塔云建站-模板下载,web开发资源,技术博客 ②:<div>
U7h易塔云建站-模板下载,web开发资源,技术博客 ③:<body>
U7h易塔云建站-模板下载,web开发资源,技术博客 ④:<html>
U7h易塔云建站-模板下载,web开发资源,技术博客 ⑤:document
U7h易塔云建站-模板下载,web开发资源,技术博客 ⑥:IE9/Firefox/Chrome/Safari则一直冒泡到window对象
U7h易塔云建站-模板下载,web开发资源,技术博客
事件捕获:U7h易塔云建站-模板下载,web开发资源,技术博客U7h易塔云建站-模板下载,web开发资源,技术博客Netscape 团队提出的另一种事件流叫
事件捕获(event capturing)。事件捕获的用意是在于在事件到达预订目标之前捕获它。还是没听懂,还换成捕鱼吧,一把网撒下去,渔网不得一点点往水里沉吗?慢慢的人眼就看不见渔网了,渔网一直往下沉,最后把text(鱼)罩住,这个过程就是一个捕获。多钓鱼有益身心健康。呵呵。
U7h易塔云建站-模板下载,web开发资源,技术博客
U7h易塔云建站-模板下载,web开发资源,技术博客DOM事件流:U7h易塔云建站-模板下载,web开发资源,技术博客U7h易塔云建站-模板下载,web开发资源,技术博客“DOM2级事件”规定的事件流包括三个阶段:
U7h易塔云建站-模板下载,web开发资源,技术博客 □:事件捕获阶段;
U7h易塔云建站-模板下载,web开发资源,技术博客 □:处于目标阶段;
U7h易塔云建站-模板下载,web开发资源,技术博客 □:冒泡阶段。
U7h易塔云建站-模板下载,web开发资源,技术博客首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后是冒泡阶段,可以在这个阶段对事件做出相应。
U7h易塔云建站-模板下载,web开发资源,技术博客
多数支持DOM事件流的浏览器都实现了一种特定的行为;即使DOM2级事件规范明确要求捕获阶段不会涉及事件目标,但是IE9,Safari,Chrome,Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。
结果就是:有两个机会在目标对象上操作事件。U7h易塔云建站-模板下载,web开发资源,技术博客