美文网首页
Js事件传播流程, 事件阻止

Js事件传播流程, 事件阻止

作者: 相识菩提 | 来源:发表于2019-06-03 14:02 被阅读0次

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。   

在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数,然而,addEventListener还可以传入第三个参数,第三个参数默认值是false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数。

(1).捕获阶段:事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事件,直到达到目标节点。

(2).目标(target)阶段:在此阶段中,事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后,就会运行该监听器。

 

(3).事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制。在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最外面的元素。如果把事件处理程序指定给所有的元素,那么这些事件将依次触发。

阻止默认事件

1、在javescript中,return flase可以阻止默认事件,但必须加在onmousedown事件中,down的事儿干完了,再加return flase。

2、在自定义函数addEvent中,return flase会失效,请使用事件对象来进行阻止。ev.preventDefault();//阻止默认事件。

3、在低版本的IE中这些都不好使,需在onmousemove事件中调用obj.setCapture&&obj.setCapture();并且在onmouseup事件中清除obj.releaseCapture&&obj.releaseCapture();

阻止事件冒泡

事件冒泡:

1、当子级的事件触发时,其父级的事件也被触发了。

2、冒泡跟它们在页面中的显示位置无关,只要在html结构中两者是属于父子关系,就存在事件冒泡。

3、阻止事件冒泡必须加在子级的身上。通过事件对象进行阻止。ev.cancelBubble=true;

相关文章

  • Js事件传播流程, 事件阻止

    js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。 在我们平常用的addEventLis...

  • JS 事件(2)

    1、事件传播机制、阻止传播、取消默认事件、事件代理这些到底是什么呢? ①事件传播机制:JS事件传播包括三个阶段: ...

  • 前端面试(一)

    一、事件传播流程 js事件传播流程主要分为三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。 二、Ajax轮询—...

  • Js事件传播流程及事件阻止与事件委托

    事件 什么是事件 HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScri...

  • 10:事件

    解释以下概念:事件传播机制、阻止传播、取消默认事件、事件代理。 写一个 Demo,演示事件传播的过程,演示阻止传播...

  • Bom事件冒泡事件代理

    编写一个通用的事件绑定函数 html结构 js通用函数 普通函数 阻止事件冒泡(阻止子元素向上冒泡)事件冒泡的流程...

  • 关于js事件冒泡、阻止事件冒泡

    关于js事件冒泡、阻止事件冒泡 一、事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什...

  • js事件传播流程

    什么是JavaScript事件? 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。js事件是由访问...

  • javascript 中阻止事件冒泡和阻止默认行为

    事件冒泡简介 当某个事件触发时,事件开始从内向外传播,直到document。 阻止事件冒泡和阻止默认事件 阻止事件...

  • DOM事件概念以及过程

    解释以下概念:事件传播机制、阻止传播、取消默认事件、事件代理 事件传播机制 事件传播机制分为三个阶段 事件捕获阶段...

网友评论

      本文标题:Js事件传播流程, 事件阻止

      本文链接:https://www.haomeiwen.com/subject/byjutctx.html