zoukankan      html  css  js  c++  java
  • Javascript和jquery事件--事件冒泡和事件捕获

    jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程,在有关jq的描述中,jq是兼容现有的主流浏览器,比如谷歌、火狐,safari等(当然是指较新的版本)。在使用jq和js的时候出了不少兼容性问题,也有可能是我对两者的了解有限造成的,还是先理清楚两者的事件。

    1、  DOM的事件捕获和事件冒泡—js支持冒泡和捕获,jq只支持冒泡

    说起事件的捕获和冒泡就要追溯到网景与微软的“浏览器大战”,不过后来,W3C的规范要求浏览器同时支持捕获和冒泡机制,并允许开发人员选择把事件注册到哪个阶段。我们这个阶段只要了解怎么用就可以了。

    当你触发某个元素的某个事件(如点击)的时候,事实上,这个元素处于它的父元素、body、html之中,你也同时触发了这些元素的事件,而冒泡和捕获两种模式不同的就是事件触发顺序的不同。

    根据DOM文档树来说,事件捕获的发生的顺序从文档树的根节点开始,比如点击肉眼可见的某个元素,事件的触发顺序是:html.clcik->body.click->父元素.click->点击的元素.click,而事件冒泡则相反,会从子元素开始,触发顺序是:点击的元素.click ->父元素.click -> body.click -> html.clcik。

    我们常用的模式是事件冒泡。

    冒泡模式在使用某些事件(如mouseout)的时候有副作用(jq有解决),而某些浏览器并不支持捕获模式,jq不支持事件捕获。需要使用捕获模式只能用js

    事件冒泡的副作用出现在mouseout,即鼠标移出元素的事件。如鼠标移出子元素的时候,如果你不做任何操作,它会继续冒泡,触发父元素的mouseout事件,即使这时候你的鼠标即使还在父元素内也会触发父元素绑定的移出事件。你需要在每一个mouseout事件阻止事件冒泡。但jQuery提供了mouseenter和mouseleave事件作为替代来避免这个副作用。

    在jq中使用的都是事件冒泡,而js默认使用的是事件冒泡,但提供了事件捕获的注册。使用:

      target.addEventListener(type,fn,true/false);//其中最后一个参数默认是false(冒泡模式),当你设置true就是捕获模式

    至于冒泡和捕获触发的顺序,应该是先冒泡再捕获,自己可以写个监听器测试一下。

    参考:

    https://www.cnblogs.com/susanws/p/5430777.html

    http://www.ituring.com.cn/article/420?q=jQuery%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96

    当你深入了解,你就会发现世界如此广袤,而你对世界的了解则是如此浅薄,请永远保持谦卑的态度。
  • 相关阅读:
    JS放在head和放在body中的区别
    模板模式(Template Pattern)
    原型模式
    Linux下的头文件搜索路径
    How to Change the Default Theme Appearance [editing with no theme]
    版本控制
    What is libacl.so.1 ?
    交叉编译器 arm-linux-gnueabi 和 arm-linux-gnueabihf 的区别
    mount --bind 的妙用
    mount的bind选项
  • 原文地址:https://www.cnblogs.com/liwxmyself/p/10248454.html
Copyright © 2011-2022 走看看