Javascript中的事件冒泡与捕获

编程之家收集整理的这篇文章主要介绍了Javascript中的事件冒泡与捕获编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搜索热词

事件冒泡和事件捕获

起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊


  • Js事件流

    页面的哪一部分会拥有某个特定事件,例子:在纸上画一组同心圆,如果手指放在同心圆上,那么手指向的不是一个圆,而是纸上所有的圆。在页面中也是,如果点击了某个按钮,同时也单击了按钮的容器元素,甚至也单击了整个页面

    事件流页面接收事件的顺序,IE和Netscape最开始提出了两种概念,两种事件冒泡流事件捕获流

    <!-- 假如有这样一段相同的html -->
    <!DOCTYPE html>
    <html>
        <head><title>bubbling and capture</title></head>
        <body>
            <div id="myDiv">Click me</div>
        </body>
    </html>
  • 事件冒泡(event bubbling)

    IE提出的事件处理方式,即事件开始时,由最具体的元素接收,然后逐级向上传播到不具体的节点

    如果点击例子中的div元素,那么这个click的事件传播顺序如下:div -> body -> html -> document

    也就是说,click事件首先会在div元素上触发,这个元素就是我们单击的元素,然后click事件会沿着DOM树向上传播,在每一级节点都会发生,直到传播到document对象

    所有浏览器都支持事件冒泡,但是在具体实现上会有些许的差别,例如IE5.5以及更早版本中的事件冒泡会跳过Html元素,直接从body跳到document元素,而IE9,Firefox,Chrome,Safari则将事件一直冒泡到window对象

  • 事件捕获(event capturing)

    Netscape网井团队则题除另一种事件流叫做事件捕获,事件捕获的思想是不太具体的节点应该更早的接收到事件,而具体的节点应该最后接收到事件,事件捕获的用意在于事件达到预计目标之前捕获他,如果还是以上面的例子,单击div

    那么触发顺序会是这样 document -> html -> body -> div

    在事件捕获过程中,document对象首先接收到click事件,然后事件沿DOM树依次向下,一直传播到时间的实际目标即div元素

    虽然Netscape是开发这种事件流,但是目前所有较新的浏览器都支持这种事件流模型,尽管“DOM2级事件”规范要求事件应该从document对象开始传播,但是这些浏览器都是从window对象开始捕获事件

    由于老版本浏览器不支持,所以很少使用事件捕获,推荐放心使用事件冒泡,在有特殊需求时再使用事件捕获

  • DOM事件流

    "DOM2级别事件"什么是DOM2级别规定的事件流包括三个阶段

    事件捕获阶段 处于目标阶段 事件冒泡阶段
    事件未处于目标,事件传递按照从大到小,从外层顺着DOM树向目标传递,触发顺序,从外到里 处于目标阶段:事件会在目标元素上发生,并且在事件处理中堪称冒泡阶段的一部分 事件冒泡阶段:事件从目标元素开始,顺着DOM树往外传递,依次到父容器,body,html,document部分浏览器会到window
  • 什么是DOM2级别?什么是DOM0级别?什么是DOM事件处理程序等级

    事件用户或浏览器自身执行的某种动作,例如click,load,mouSEOver都是事件名字,而相应某个事件的函数,就叫做事件处理程序,事件处理程序的名字以on开头,例如click事件的处理程序就是onclick,load事件的处理陈鼓型就是onload

    • HTML事件处理程序

      某个html元素支持某种事件,都可以使用一个与对应时间处理程序同名的html属性来指定,这个属性的值则是能够执行的javascript代码,例如

      <div onclick="alert(1)"></div>
      

      该事件触发于:冒泡阶段触发

    • DOM0级事件处理程序

      html事件处理程序javascript逻辑和html耦合太强

      DOM0级事件处理程序写法

          var btn = document.getElementById('myBtn')
          btn.onclick= function(){
              alert(this.id)
          }
      

      此处的this指向的是这个触发元素,并且可以通过this对象访问元素的任何属性方法,以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

      移除事件监听btn.onclick = null

    • DOM2级事件处理程序

      两个方法addEventListenerremoveEventListener

      所有的DOM节点都包含这两个方法,并且接受三个参数,要处理的事件名,作为事件处理函数函数和一个布尔值,最后这个布尔值如果是true,表示在捕获阶段调用事件处理程序,如果是false则表示在冒泡阶段调用事件处理程序

      而事件流的顺序是捕获-目标-冒泡,捕获阶段会在冒泡事件处理之前,所以改为true的话有可能会影响正常的时间顺序

      demo如下:

          var btn = document.getElementById('myBtn')
          btn.addEventListener('click',function(){
              alert(this.id)
          },false)
      
      

      DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序,而前两个则是会替换掉事件处理程序,因为属性只有一个,而元素的方法也会重写

      但是也意味着,不能通过重写来移除事件处理程序,所以通过removeEventListener来移除事件处理程序,并且匿名函数无法移除

      大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器,最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段,如果不是特别需要,不建议在时间捕获阶段注册事件处理程序

    • IE事件处理程序

      IE中实现了与DOM中类似的两个方法attachEventdetachEvent,但是仅接受两个参数,一个是事件处理程序名称与事件处理函数,由于IE8以及更早的版本只支持事件冒泡,所以通过attachEvent添加的事件处理程序都会被添加事件冒泡阶段

      需要注意的是:

      1.attachEvent和DOM级方法主要区别在事件处理程序的作用域,DOM0级会在所属元素的作用域内,而attachEvent事件处理程序会在全局作用域中运行,因此在attachEvent添加函数中,this指向window

      2.attachEvent添加多个事件时候时,不是按照添加顺序执行,而是按照相反的顺序执行,后添加,先执行

总结

  • el.addEventListener函数的第三个参数问题得到了解决,使用这种方法表示绑定DOM2级别的事件监听程序,可以重复指定,第三个参数表示是否在捕获阶段处理事件,捕获-》 目标 -》 冒泡
  • 第三个参数默认false,如没有特殊情况不推荐使用在捕获阶段处理时间程序
  • 了解了 事件流,捕获和冒泡,DOM事件类型级别(HTML级事件处理程序,DOM0级事件处理程序,DOM2级事件处理程序,IE事件处理程序)
  • 事件流过程,先从外到内,捕获阶段,到达目标阶段,从内到外冒泡

相关文章

总结

以上是编程之家为你收集整理的Javascript中的事件冒泡与捕获全部内容,希望文章能够帮你解决Javascript中的事件冒泡与捕获所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206

猜你在找的JavaScript相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言中的double类型( ),不区分浮点型和整数型。 number类型不同进制
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有以下几点 base64是一种图片编码方式,用一长串超长的字符串表示图片 在加载
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模型 V:视图,即浏览器最前端渲染的页面 M:模型,数据模型,就是后端页面渲染依
起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行都没问题,在IE上也做了兼容代码。 但是今天接电话,老板说你这网页在xp上不显示啊。IE上好使。goog
js判断undefined js判断null js判断null和undefined
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图。功能不需要太炫酷,那么bootstrap的插件是你的首要选择。 使用方式 引入js
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearInterval(mylsTimer); }