JS之DOM篇-事件流

JS与HTML的交互是通过事件实现的，事件是指文档或浏览器窗口中发生的一些特定的交互瞬间，事件流描述的是从网页中接受事件的顺序

为什么会有事件流？举个例子，页面上有个按钮，当点击按钮的时候不仅仅是触发了按钮的click，同时触发了文档的click，因为按钮是文档的一部分。事件流分为事件冒泡流和事件捕获流

事件冒泡

事件冒泡是指事件开始时是由具体的元素接收这个事件，然后逐级向上传播到较为不具体的节点。即由文档中嵌套层次最深的节点传播到文档节点

示例HTML

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>Document</title>
</head>
<body>
<div id="box" style="width: 300px;height: 30px; background: teal;"></div>
<script>
  box.onclick = function(){box.innerHTML += 'div\n';}
  document.body.onclick = function(){box.innerHTML += 'body\n';}
  document.documentElement.onclick = function(){box.innerHTML += 'html\n';}
  document.onclick = function(){box.innerHTML += 'document\n';}
  window.onclick = function(){box.innerHTML += 'window\n';}
</script>
</body>
</html>

在事件冒泡过程中，点击页面中的div元素，click事件沿着DOM树传播的顺序如下：

(1)    <div>
(2)    <body>
(3)    <html>
(4)    document
(5)    window

事件捕获

事件捕获是和事件冒泡相反的操作，表示由不具体的某个节点最先接收到这个事件，然后通过层层捕获到具体的那个节点。事件捕获的用意在于事件到达预订目标前就能捕获它

示例HTML

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>Document</title>
</head>
<body>
<div id="box" style="width: 300px;height: 30px; background: teal;"></div>
<script>
  box.addEventListener('click',function(){box.innerHTML += 'div\n'},true)
document.body.addEventListener('click',function(){box.innerHTML += 'body\n';},true);
document.documentElement.addEventListener('click',function(){box.innerHTML += 'html\n';},true);
document.addEventListener('click',function(){box.innerHTML += 'document\n';},true);
window.addEventListener('click',function(){box.innerHTML += 'window\n';},true);
</script>
</body>
</html>

在事件捕获过程中，window对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即<div>元素，具体顺序如下：

(1)    window
(2)    document
(3)    <html>
(4)    <body>
(5)    <div>

事件流

事件流又称作事件传播，DOM2级规定了事件流的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

posted @ 2021-09-29 13:18  wmui  阅读(93)  评论(0)  编辑  收藏  举报