Js事件传播流程

Js事件传播流程

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

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

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

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

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

                  如何阻止冒泡   

可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在同一对象上定义了其他处理程序,剩下的处理程序将依旧被调用,但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用。

                                                  阻止浏览器默认行为

事件默认行为:浏览器自己默认做的事情

哪些默认行为要做阻止

1.  a标签链接跳转

2.  Submit按钮的提交,

3.  右键菜单,

4.文本框的输入

阻止默认行为的方式

event.preventDefault();  event.returnValue = false;  return false;

自定义右键菜单 oncontextmenu

文本框只能输入数字

原文地址:https://www.cnblogs.com/zxyzm/p/10495370.html

时间: 2024-11-11 01:30:09

Js事件传播流程的相关文章

JS中的事件传播流程

JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2,DOM事件流存在三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段. 事件流:事件发生时,事件在元素节点与根节点之间的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流.事件传播顺序的两种事件流模型:事件冒泡,事件捕获. 事件捕获(event capturing):事件从最不

JS事件传播和JSBom部分总结

1.JS事件传播 JS Bom 原文地址:https://www.cnblogs.com/liu-web-bew/p/9345645.html

js事件传播的一个疑惑

在学习事件传播的时候,发现一个问题,当时是这样子的. 我给多层元素分别绑定了冒泡和捕获事件.按道理应该先从外向内执行完所有的捕获事件,再由内向外执行所有的冒泡事件. 但是天不随人愿啊,有个元素偏偏先执行了冒泡事件,后执行了捕获事件. 我怎么查资料也没弄明白,当时就放下了.今天突然发现自己这个不按规矩的元素正好是我所有bom元素的最里层的元素. 我就想啊,可能是到最里面浏览器就不去区分它绑定的事件是否是捕获还是冒泡了吧. 于是乎我就证明了一下: 第一:我先把最内层元素的捕获事件和冒泡事件换了注册顺

事件传播流程

什么是事件? 事件是文档和浏览器窗口中发生的特定的交互瞬间. 事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是web浏览器中发生的事情,比如说某个web页面加载完成,或者是用户滚动窗口或改变窗口大小. 什么是事件流: 事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(

js 事件阻止传播方法,准确定位事件源

在做网页时,经常会对按钮等添加事件,比如表单提交,有时候发现,明明点了一次提交按钮,数据库却多添加了一条甚至多条记录,造成原因可能是一次连接触发了多次按钮,还有可能是事件发生了冒泡.前一种方法可以把按钮点击后设置disabled属性为true即为不可用状态即可,后一种可以用下面方法 $("li").click(function(event){ if(this==event.target){ .... } return false; }); 这样也就防止事件传播.很好解决了冒泡事件.

js事件冒泡和事件委托

js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: 1 <ul class="clearfix" data-type="cityPick"> 2 <li class="active_sort_opts" data-id="0">全部</li> 3 <li data-id="88">纽约</li> 4 <

JS事件(事件冒泡和事件捕获)

事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名.作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象: type属性 用于获取事件类

js事件的三个阶段

js事件的三个阶段分别为:捕获.目标.冒泡 1.捕获:事件由页面元素接收,逐级向下,到具体的元素 2.目标:具体的元素本身 3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素 IE5.5:div---body---document IE6.0:   div---body---html---document Mozilla:div---body---html---document---window 事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发 事件冒泡:当使用事件冒泡时,子级元素