09-JS的事件流的概念(重点)

在学习jQuery的事件之前,大家必须要对JS的事件有所了解。看下文

事件的概念

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

什么是事件流

事件流描述的是从页面中接收事件的顺序

1、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:

① 事件捕获阶段;

② 处于目标阶段;

③ 事件冒泡阶段

那么其实呢,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>

当我们点击这个btn的时候,看看页面都输出了什么:

在解释输出结果为什么是这样之前,还有几个知识点需要了解一下即可:

1、addEventListener

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

2、document、documentElement和document.body三者之间的关系:

document代表的是整个html页面;

document.documentElement代表的是<html>标签;

document.body代表的是<body>标签;

接着我们就来聊聊上面的例子中输出的结果为什么是这样:

在标准的“DOM2级事件”中规定,事件流首先是经过事件捕获阶段,接着是处于目标阶段,最后是事件冒泡阶段。这里可以画个图示意一下:

首先在事件捕获过程中,document对象首先接收到click事件,然后事件沿着DOM树依次向下,一直传播到事件的实际目标,就是id为btn的a标签。

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

需要注意的点:由于老版本的浏览器不支持事件捕获,因此在实际开发中需要使用事件冒泡,在由特殊需要时再使用事件捕获

补充知识了解即可:

1、IE中的事件流只支持“事件冒泡”,但是版本到了IE9+以后,实现了“DOM2级事件”,也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。

2、在DOM事件流中,实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发,并在事件处理中被看成“冒泡阶段”的一部分。然后,“冒泡阶段”发生,事件又传播回文档。

jquery的常用事件

jquery常用的事件,大家一定要熟记在心

原文地址:https://www.cnblogs.com/majj/p/9129974.html

时间: 2024-11-09 22:13:16

09-JS的事件流的概念(重点)的相关文章

JS的事件流的概念(重点)

在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下"事件流"的概念. 什么是事件流 事件流描述的是从页面中接收事件的顺序 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段: ① 事件捕获阶段: ② 处于目标

js中事件流的理解

事件的概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件. 想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流: 1,DOM事件流, 事件流包括三个阶段: 1,事件捕获阶段. 2,处于目标阶段.(当前事件阶段) 3,事件冒泡阶段. <!DOCTYPE html> <html lang="en"> <h

浅谈js之事件流

这些日子我就把js的相关知识梳理一下,今天来说javascript中的事件流. 1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到win

jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding 注意:这个方法不接受任何参数..css(‘width’)(或.css(‘height’))和 .width()(或.height()

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

位置信息 事件流概念 jquery的事件

jQuery 位置信息 jQuery位置信息就是一系列封装好的api. 一.高度和宽度 获取高度 .width 设置高度 .width() 获取宽度 .heigth 设置高度 .heigth 二.innerwidth .innerheigth 获取内部宽 .innerwidth() 设置内部宽 .innerwidth(value) 获取内部高 .innerheigth 获取内部宽 .innerheigth(value) 三 .outwidth. outheigth 获取外部宽 .outwidth

js关于事件的一些总结(系列一)

今天小弟在这里说一下 js 关于事件的一些总结  在这里直接上代码 省去啰嗦的步骤以免看烦了  总结的不好希望大家见谅 一.事件的默认事件 事件的默认事件是什么? 就是a标签有一个链接事件  input type标签有一个默认的点击输入事件 等等.... 那么问题来了 如果我这里有一个a标签  默认是有一个超链接的  我在a标签上添加了点击事件 那么会不会触发点击事件呢?? 答案是不会   代码来证明一下(经过测试) <!DOCTYPE html> <html lang="en

事件流和事件委托

导读: 当我们点击一个元素触发该元素上绑定的点击事件时,同时也点击了该元素的父元素以及祖先元素等元素,如果该元素的父元素以及祖先元素等元素也绑定了点击事件,那么它们的执行顺序是怎样的呢?为了解决这个问题,所以有了事件流的概念. 1.事件流 当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流.简单地说:事件流就是描述页面中接收事件的顺序.其包含三个阶段: 捕获阶段:事件从 Document 节点自上而下向目标节

从click事件理解DOM事件流

事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这些函数的运行顺序?于是有了事件流的概念(事件捕捉,事件冒泡) 举个例子: <div id="outer"> <p id="inner">Click me!</p> </div> 为了看起来方便,先无视CSS样式,那么蓝色的