JS事件流

最新推荐文章于 2024-03-11 21:23:53 发布

Head_Bird

最新推荐文章于 2024-03-11 21:23:53 发布

阅读量208

点赞数

原文链接：https://www.cnblogs.com/stfei/p/9134222.html

版权

JavaScript的事件流的概念

事件的概念：

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：

1，DOM事件流，

"DOM2事件流"规定的事件流包括三个阶段：

1，事件捕获阶段。

2，处于目标阶段。

3，事件冒泡阶段。

js中一种绑定事件的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn处于事件捕获阶段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn处于事件冒泡阶段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document处于事件捕获阶段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document处于事件冒泡阶段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html处于事件捕获阶段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html处于事件冒泡阶段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body处于事件捕获阶段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body处于事件冒泡阶段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按钮</a>
</body>
</html>

效果：

在这里插入图片描述

1，addEventListener

addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值，最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

2，document，documentElement和document.body三者之间的关系：

1、document代表的是整个html页面，

2、document.documentElement代表是的标签。

3、document.body代表的是标签。

出现上图结果的原因是：

在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:
在这里插入图片描述
　首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标。就是id为btn的标签。

接着在事件冒泡的过程中，时间开始是由具体的元素(a标签)接收，然后逐级向上传播到较为不具体的节点。

jQuery的常用事件：

在这里插入图片描述

Head_Bird

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件流

JavaScript的事件流的概念事件的概念：HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。什么是事件流：1，DOM事件流，"DOM2事件流"规定的事件流包括三个阶段：1，事件捕获阶段。2，处于...
复制链接

扫一扫