前端页面跳转获取参数(前端系列事件冒泡和事件获取)

1、什么是事件?

我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

2、事件冒泡与事件捕获

(1)事件传播——冒泡与捕获

默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里, 你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参 数设为true。

(2)冒泡事件流

当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随 着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类 型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件 的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法, 在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件 的传播,事件将一直通过DOM冒泡直至到达文档根。

(3)捕获事件流

事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目 标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素 之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为 true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传 递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过 DOM节点再进行冒泡。

前端页面跳转获取参数(前端系列事件冒泡和事件获取)(1)

事件冒泡

前端页面跳转获取参数(前端系列事件冒泡和事件获取)(2)

事件捕获

4、阻止事件冒泡和事件默认行为

前端页面跳转获取参数(前端系列事件冒泡和事件获取)(3)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页