浅谈事件流

最新推荐文章于 2024-07-05 21:53:25 发布

原创最新推荐文章于 2024-07-05 21:53:25 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

35 篇文章

订阅专栏

事件是文档或浏览器窗口发生的一些特定的交互瞬间，比如点击，鼠标移入移出。事件最早在IE3中出现，DOM2规范时才开始标准化DOM 事件。自此之后，除了IE8，其他所有主流浏览器都支持DOM2级事件，只有IE8还很执着的使用着自己的事件系统。学习事件时，我很头疼的一点就是关于浏览器的兼容性，所以一开始说清楚这个感觉会比较好。

说到事件，就不得不说事件流，事件流描述的是页面接收事件的顺序。事件流就包括我们经常听到的事件冒泡，事件捕获。

事件冒泡，就是事件一开始由目标元素接收，然后逐级向上传播，绝大多数主流浏览器会传播到window。IE早期版本会跳过html，传播到document。事件冒泡是IE的事件流，所有现代浏览器都支持事件冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="content">
        <p>点击这里</p>
    </div>
<script>
   var _div=document.getElementById("content");
   var _p=document.getElementsByTagName("p")[0];
   var _body=document.getElementsByTagName("body")[0];
   var _html=document.getElementsByTagName("html")[0];
   _div.addEventListener("click",function(){
       alert("这是在div上触发的事件")
   });
    _p.addEventListener("click",function () {
        alert("这是在p上触发的")
    })；
    _html.addEventListener("click",function () {
        alert("这是在html上触发的")
    })；
    _body.addEventListener("click",function () {
        alert("这是在body上触发的")
    });
    document.addEventListener("click",function () {
        alert("这是在document上触发的")
    });
    window.addEventListener("click",function () {
    alert("这是在window上触发的");
});
</script>
</body>
</html>

上述代码，我们给页面上的p,div body,document,window都绑定了事件处理程序（具体实现先不要在意，我们后面再说）。就是说当这些元素接收到事件后就会执行事件处理程序。事件冒泡的情况下，这些元素接收事件的顺序就是从我们点击的目标元素p开始，一层层向上。执行事件处理程序的顺序当然也就是从p开始，一层层向上。所以上面程序运行后会依次弹出”这是在p上触发的”，”这是在div上触发的事件”，”这是在body上触发的”，”这是在html上触发的”（这一层IE早期浏览器没有），”这是在document上触发的”，”这是在window上触发的”（这一层IE早期浏览器没有）。

事件捕获，和事件冒泡相反，触发事件后，由window对象先接收，然后逐层向下传播，直到目标元素。事件捕获绝大多数主流浏览器都会支持，但一些老版本的浏览器不支持。所以一般情况下，不使用事件捕获。上述代码中，在事件捕获的事件流中会依次弹出”这是在window上触发的”，”这是在html上触发的”，”这是在body上触发的”，”这是在div上触发的事件”，”这是在p上触发的”

DOM事件流：DOM2级规定了DOM事件流，包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。绝大多数主流浏览器都支持DOM事件流（当然是要除了IE8的）。也就是说，页面触发一个事件后，会先进入事件捕获阶段，由window先接收事件（少数浏览器是document），然后逐级向下，到目标阶段，由目标元素接收，然后再进入冒泡阶段，向上传播，到window（少数浏览器是document）。

PS:接收事件不是响应事件，只要在页面上触发了事件，在不同的事件流中，相应的元素就会按一定顺序接收事件，但只有在相应的事件流阶段给相应元素注册事件处理程序，才会在接收到事件时响应事件，执行事件处理程序。