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

评论

  • 匿名