精华内容
下载资源
问答
  • JS中的事件冒泡和事件捕获
    2021-06-04 19:17:19

    谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。

    事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。

    事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

    1、冒泡事件:

    事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是,就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作,但是父div的onclick事件同样会被触发。

    html:

    <div>
    
        <input type="button" value="测试事件冒泡" />
    
    </div>
    

    js:

    var $input = document.getElementsByTagName("input")[0];
    
     var $div = document.getElementsByTagName("div")[0];
    
     var $body = document.getElementsByTagName("body")[0];
    
    
    
     $input.onclick = function(e){
    
            this.style.border = "5px solid red"
    
            var e = e || window.e;
    
            alert("red")
    
      }
    
      $div.onclick = function(e){
    
            this.style.border = "5px solid green"
    
            alert("green")
    
      }
    
      $body.onclick = function(e){
    
            this.style.border = "5px solid yellow"
    
            alert("yellow")
    
      }
    

    效果:依次弹出”red“,“green”,“yellow”。这就是事件冒泡:触发button这个元素,却连同父元素绑定的事件一同触发。

    2、阻止事件冒泡

    如果对input的事件绑定改为:

    $input.onclick = function(e){

    this.style.border = "5px solid red"
    
    var e = e || window.e;
    
    alert("red")
    
    e.stopPropagation();
    

    }

    这个时候只会弹出”red“,因为阻止了事件冒泡。

    3、事件捕获:

    从顶层元素到目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

    $input.addEventListener("click", function(){
    
        this.style.border = "5px solid red";
    
        alert("red")
    
    }, true)
    
    $div.addEventListener("click", function(){
    
        this.style.border = "5px solid green";
    
        alert("green")
    
    }, true)
    
    $body.addEventListener("click", function(){
    
        this.style.border = "5px solid yellow";
    
        alert("yellow")
    
    }, true)
    

    这个时候依次弹出”yellow“,“green”,“red”。这就是事件的捕获。

    如果把addEventListener方法的第三个参数改成false,则表示只在冒泡的阶段触发,弹出的依次为:”red“,“green”,“yellow”。这是因为在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

    程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

    ele.addEventListener(‘click’,doSomething2,true)

    true=捕获

    false=冒泡

    更多相关内容
  • 谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 事件冒泡阶段:...
  • Javascript事件流(事件捕获、事件冒泡)–>事件委托(代理) Javascript与HTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们与浏览器中的web页面进行特定的交互时...
  • DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的...和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
  • 本文主要介绍了JS中绑定事件顺序(事件冒泡与事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧
  • 事件捕获:当一个事件触发后,从window对象出发,不断经过下级节点,直到目标节点,这个过程就是事件捕获。自内而外,从根到叶,从小到大。 事件冒泡:即是事件开始时由最具体的元素接收,然后逐级向上传播到较为不...
  • javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
  • 在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,...
  • 主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料,需要的朋友可以参考下
  • 主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
  • (2)捕获事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。 (3)DOM事件流:同时支持两种事件模型:捕获事件
  • 传统事件捕获和冒泡的流程解析
  • 海思hi3536开发板QT鼠标事件捕获,鼠标移动 ,板子上的配置工作。成功显示鼠标和捕获事件, 可以用cat /dev/input/event0查看鼠标移动数据
  • javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程; 事件捕获刚好相反,是从祖先节点到子节点的过程。 给一个...
  • 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 <p id=inner>Click me! 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click...
  • 本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下。 1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发...
  • 本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考,具体如下: 1、事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
  • js代码-面试题---Array.prototype.sort() 底层原理,事件捕获与冒泡理解
  • 谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName(input)[0]; var $...
  • 本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考,具体如下: 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> [removed] [removed] = function(){ ...
  • 事件冒泡与事件捕获

    2021-01-20 13:31:38
    事件冒泡原理 从下至上 从最里面元素事件冒泡到最外层父级元素上 大哥 二哥 三弟 var a = document.getElementsByClassName('a')[0] var b = document.getElementsByClassName('b')[0] var c = document....
  • 想要了解什么是事件捕获与冒泡,需要先了解什么是事件。 什么是事件? 我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
  • ​ 事件冒泡、事件捕获、事件委托、事件绑定可以说是JavaScript基础中最为重要的知识点 公司:腾讯 DOM事件流 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播...

    前言

    ​ 事件冒泡、事件捕获、事件委托、事件绑定可以说是JavaScript基础中最为重要的知识点

    公司:腾讯


    DOM事件流

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

    事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。

    包括三个阶段:

    1. 事件捕获阶段
    2. 处于目标阶段
    3. 事件冒泡阶段

    我们知道,在dom模型中,html是多层次的,当一个html元素上产生事件时,该事件会在dom树元素节点之间按照特定的顺序去传播。传播路径的每一个节点,都会收到这个事件,这就是dom事件流。当事件发生后,就会从内向外逐级传播,因为事件流本身没有处理事件的能力,所以,处理事件的函数并不会绑定在该事件源上。例如我们点击了一个按钮,产生了一个click事件,click事件就会开始向上传播,一直到到处理这个事件的代码中。

    事件捕获:事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

    事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。

    事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window 。

    注意:

    • JS代码只能执行捕获或者冒泡其中的一个阶段
    • onclick 和 attachEvent 只能得到冒泡阶段
    • addEventListener (type, listener[, useCapture]) 第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件冒泡阶段电泳事件处理程序。
    • 在实际开发中,我们很少使用事件捕获(低版本ie不兼容),我们更关注事件冒泡
    • 有些事件是没有冒泡的,比如onblur、onfocus、onmouseover、onmouseleave
    • 虽然事件冒泡有时候会带来麻烦,但是有时候又会巧妙的做某些事情,我们后面讲解

    事件对象

    • event 就是一个事件对象,写道我们的侦听函数的小括号里面,当形参来看
    • 事件对象只有有了事件才会存在,他是系统给我们自动创建的,不需要我们传递参数
    • 事件对象是我们的事件的一系列相关数据的集合,比如鼠标点击里面就包含了鼠标的相关信息
    • 这个事件对象我们可以自己命名,比如 event、evt 、e 等
    • 事件对象也有兼容性问题。 IE 6、7、8通过 window.event 实现

    兼容性写法:

    event = event || windoe.event;
    

    事件对象常见额属性和方法

    事件对象属性方法说明
    e.target返回触发事件的对象 标准
    e.scrElement返回触发事件的对象 非标准 IE 6 7 8 使用
    e.type返回事件的类型,比如click、mouseover等,不带 on
    e.cancelBubble该属性阻止冒泡,非标准,IE 6 7 8 使用
    e.returnValue该属性阻止默认事件(默认行为)非标准 ,IE 6 7 8 使用,比如不让链接跳转
    e.preventDefaule() 该方法阻止默认事件(默认行为)标准 ,比如不让链接跳转
    e.stopPropagation()阻止冒泡,标准

    e.target 和 this 的区别

    this 返回的是绑定事件的对象(元素)

    e.target 返回的是点击的那个对象,就是谁触发了这个事件,如点击事件->谁被点了

    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        console.log(this);
        console.log(e.target);
    })
    
    // <ul>...</ul>
    // <li>123</li>
    

    阻止对象默认行为(重)

    三种方法:

    • e.preventDefaule();
      是一个方法,适合普通浏览器
    • e.returnValue; 是一个属性,适用于 IE 6 7 8
    • return false;
      没有兼容性问题,但是需要注意后面的语句就不执行了,直接跳出

    阻止冒泡(重)

    • event.stopPropagation(); // 一般浏览器停止冒泡
    • event.cancelBubble; // IE 6 7 8 的停止冒泡
    var father = document.querySelector('.father');
    var son = document.querySelector('.son');
    father.addEventListener('click', alertName, false);
    son.addEventListener('click', alertName, false);
    document.addEventListener('click',function () {
        alert('document');
    }, false);
    function alertName (event) {
        alert(this.getAttribute("class"));
        event.stopPropagation();    // 停止冒泡
        event.cancelBubble;         // IE 6 7 8 的停止冒泡
    }
    

    事件委托(代理、委派)

    事件委托的原理(重)

    事件委托的原理:不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点。

    例如: 给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li ,然后事件冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。

    事件委托的作用

    只操作了一次 DOM ,提高了程序的性能。

    为什么要事件委托?(重)

    在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的操作dom,那么引起浏览器重绘和回流的可能也就越多,页面交互的事件也就变的越长,这也就是为什么要减少dom操作的原因。每一个事件处理函数,都是一个对象,那么多一个事件处理函数,内存中就会被多占用一部分空间。如果要用事件委托,就会将所有的操作放到js程序里面,只对它的父级(如果只有一个父级)这一个对象进行操作,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能

    事件委托小案例

    需求:鼠标放到li上,对应的li背景颜色变为灰色

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    

    普通实现

    (给每个li都绑定一个事件让其变灰):

    $("li").on("mouseover",function(){
       $(this).css("background-color","gray").siblings().css("background-color","white");
    })
    

    上面这种普通实现看似没有什么问题,但是如果在这段代码结束以后,我们动态的给ul又增加了一个li,那么新增的这个li是不带有事件的,如果有无数个li结点,我们的dom是吃不消的。

    使用事件委托实现

    js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素

    利用事件冒泡 只指定ul的事件处理 就可以控制ul下的所有的li的事件

    $("ul").on("mouseover", function(e) {
        $(e.target).css("background-color", "gray").siblings().css("background-color", "white");
    })
    
    • 第一步:给父元素绑定事件

      给元素ul添加绑定事件,绑定mouseover事件设置css(也可通过addEventListener为点击事件click添加绑定)

    • 第二步:监听子元素的冒泡事件

      这里默认是冒泡,点击子元素li会向上冒泡

    • 第三步:找到是哪个子元素的事件

      通过匿名回调函数的参数e用来接收事件对象,通过target获取触发事件的目标(可以通过判断target的类型来确定是哪一类的子元素对象执行事件)

    展开全文
  • 事件冒泡与事件捕获详解

    千次阅读 2021-07-21 10:00:38
    事件流可分为冒泡型事件流、捕获事件流。 (1)事件冒泡:微软公司提出的,事件由子元素传递到父元素的过程叫做冒泡(false)。 查找事件事件响应)的顺序:文本节点–>元素节点—>body—>html—>...

    事件流

    概念

    首先,我们来了解一下什么是事件流。

    事件流:当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播, 这个过程称之为事件流。

    (当页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程称为事件流。)

    分类

    事件流可分为冒泡型事件流、捕获型事件流。

    (1)事件冒泡:微软公司提出的,事件由子元素传递到父元素的过程叫做冒泡(false)。

    查找事件(事件响应)的顺序:文本节点–>元素节点—>body—>html—>document(例如点击事件)<向上响应>

    (2)捕获事件:网景公司提出的,事件由父元素传递到子元素的过程叫做事件捕获。(ture)

    查找事件(事件响应)的顺序:document–>html–>body–>元素节点–>文本节点 <向下响应>

    应用

    在使用"事件监听"的方式绑定事件时,可以设置事件的响应方式。

    DOM对象.addEventListener(事件,事件处理程序,事件冒泡方式)

    事件冒泡方式:

    (1)默认为false,表示冒泡阶段完成事件处理

    (2)true捕获阶段完成事件处理

    例如:

    <div class="father">father
            <div class="son">son</div>
        </div>
    
        <script>
            father=document.querySelector('.father')
            son=document.querySelector('.son')
            father.addEventListener('click',function(){
                alert('father')
            })
            
            son.addEventListener('click',function(){
                alert('son')
            })   //事件冒泡
        </script>
    

    事件冒泡方式:son——>father——>body——>html——>document
    son绑定的点击事件,没有设置事件流方式,默认的事件流类型为false(事件冒泡),当点击son盒子的时候,事件流向上冒泡,首先弹出son消息框,再弹出father消息框。

    在这里插入图片描述
    在这里插入图片描述

    阻止事件冒泡的方式

    常用方法:

    (1)事件委托:将元素的绑定事件写起其父元素上,防止事件冒泡

    (2)event.stopPropagation():可以阻止事件冒泡,阻止父级元素的绑定事件

    son.addEventListener('click',function(e){
        alert('son')
        e.stopPropagation();   //阻止事件冒泡
    }) 
    

    上面的例子中,加上e.stopPropagation()这句话,当点击son元素时,只会弹出son的弹窗,不加上这句话,点击son元素,会先弹出son,再弹出father。

    展开全文
  • 本代码为Python3.7+PyQt5.13开发实现的图形应用界面事件捕获案例,对应博文《PyQt(Python+Qt)实现的GUI图形界面应用程序的事件捕获和处理的几种方法》...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 211,372
精华内容 84,548
关键字:

事件捕获