精华内容
下载资源
问答
  • JS事件三个阶段

    千次阅读 2020-02-26 11:51:58
    事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段; 1.捕获阶段 当我们为某个元素绑定事件时,事件触发前会经历事件捕获阶段 如图 我们给某个div注册点击事件的时候,会经历事件捕获阶段,事件从最外层...

    事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段;
    1.捕获阶段
    当我们为某个元素绑定事件时,事件触发前会经历事件捕获阶段
    如图
    在这里插入图片描述
    我们给某个div注册点击事件的时候,会经历事件捕获阶段,事件从最外层捕获一直找到当前绑定事件的元素这里称为事件目标阶段,然后触发click事件()。
    2.目标阶段
    当事件从最外层不断传递到目标节点的时候,最后在目标节点触发事件。
    3.事件冒泡
    当事件触发的时候,会一层一层的往外冒至最外层元素,这里恰好与事件捕获相反
    在这里插入图片描述
    我们来看一个例子

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		#one {
    			width:300px;
    			height:200px;
    			background: red
    		}
    		#two {
    			width:250px;
    			height:150px;
    			background: blue
    		}
    		#three{
    			width:200px;
    			height:100px;
    			background: orange
    		}
    	</style>
    </head>
    <body>
    	<div id='one'>one
    		<div id='two'>two
    			<div id='three'>three</div>
    		</div>
    	</div>
    
    </body>
    <script type="text/javascript">
    	var three = document.getElementById('three');
    	one.onclick=function(){
    		console.log('one')
    		
    	}
    	two.onclick=function(){
    		console.log('two')
    		
    	}
    	three.onclick=function(){
    		console.log('three')
    		
    	}
    	
    	
    </script>
    </html>
    

    我们给3个div分别注册了点击事件,当我们点击最里面的div时。
    在这里插入图片描述
    输出了三次,这是因为事件冒泡的原因,当最里面的div被点击时事件会一层一层的往外冒
    由于三个div绑定了同一种事件所以每个元素都执行了一次。

    需要注意的是我们普通注册的事件都是在事件冒泡阶段执行的
    onclick ,mouseover.等等
    mouseentermouseleave不会触发事件冒泡

    有时候我们不希望事件在冒泡阶段执行,怎么办?
    1.通过事件对象提供的stopPropagation()方法

    three.onclick=function(e){
    		console.log('three');
    		e.stopPropagation();//停止
    	}
    

    2.通过addEventListener注册的事件可以修改第三个参数决定事件是在捕获或冒泡阶段执行
    true事件捕获
    false事件冒泡

    清除元素默认行为 e.preventDefault()

    展开全文
  • 事件三个阶段

    千次阅读 2019-05-24 16:40:39
    事件三个阶段: (1)事件捕获阶段 :从外向内 (2)事件目标阶段 :最开始选择的那个 (3)事件冒泡阶段 : 从里向外 为元素绑定事件:addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的),第三个...
    1. 事件有三个阶段:
      (1)事件捕获阶段 :从外向内
      (2)事件目标阶段 :最开始选择的那个
      (3)事件冒泡阶段 : 从里向外
    2. 为元素绑定事件:addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的),第三个参数控制事件发生时,是冒泡阶段还是捕获阶段。
    3. 事件的3个阶段通过e.eventPhase这个属性可以知道当前的事件是什么阶段,如果这个属性的值是:1---->捕获阶段,2---->目标阶段,3---->冒泡。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        #dv1 {
          width: 300px;
          height: 200px;
          background-color: red;
        }
        #dv2 {
          width: 250px;
          height: 150px;
          background-color: green;
        }
        #dv3 {
          width: 200px;
          height: 100px;
          background-color: blue;
        }
      </style>
    </head>
    <body>
    <div id="dv1">
      <div id="dv2">
        <div id="dv3"></div>
      </div>
    </div>
    <script src="common.js"></script>
    <script>
      var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
      objs.forEach(function (ele) {
        ele.addEventListener("click", function (e) {
          console.log(this.id+"====>"+e.eventPhase);
        }, true);
      });
    </script>
    </body>
    </html>
    

    (1)以上代码,addEventListener第三个参数设置为true,点击dv3输出结果为:
    dv1====>1(捕获阶段)
    dv2====>1(捕获阶段)
    dv3====>2(目标阶段)
    因为true是捕获阶段,由外向里,所以dv1先捕获,再到dv2,最后才进入目标dv3。
    (2)若将addEventListener第三个参数设置为false,点击dv3输出结果为:
    dv3====>2(目标阶段)
    dv2====>3(冒泡阶段)
    dv1====>3(冒泡阶段)
    false即为冒泡阶段,由内向里,所以先捕获到dv3目标,再向外冒泡。

    展开全文
  • JavaScript事件三个阶段

    千次阅读 2018-08-13 11:41:41
    事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段; 捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级...

    事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段;

    捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程,就是捕获阶段(Capture Phase)。事件由页面元素接收,逐级向下,到具体的元素。

    目标阶段:当事件不断的传递直到目标节点的时候,最终在目标节点上触发这个事件,就是目标阶段。具体的元素本身。

    冒泡阶段:事件冒泡即事件开始时,由最具体的元素接收(也就是事件发生所在的节点),然后逐级传播到较为不具体的节点。跟捕获相反,具体元素本身,逐级向上,到页面元素(我们平时用的事件绑定就是利用的事件冒泡的原理)。

    事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发。

    事件冒泡:当使用事件冒泡时,子级元素先触发,父元素后触发。

    W3C : 任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达事件源,再从事件源向上进行事件捕获(事件冒泡)。

    标准浏览器:addEventListener("click",function,"true")方法,若第三参数为true,则采用事件捕获。若为false,则采用事件冒泡。

    IE浏览器只支持事件冒泡,不支持事件捕获,所以它不支持addEventListener("click",function,"true")方法,所以ie浏览器使用ele.attachEvent("onclick",doSomething)。

    事件传播的阻止方法:

    在W3C中,使用stopPropagation()方法。

    在IE下使用cancelBubble = true方法。

    阻止默认行为:

    在W3c中,使用preventDefault()方法。

    在IE下return false。

    展开全文
  • js事件三个阶段

    千次阅读 2019-07-25 08:56:50
    事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段; 捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级...

    事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段;

    捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程,就是捕获阶段(Capture Phase)。事件由页面元素接收,逐级向下,到具体的元素。

    目标阶段:当事件不断的传递直到目标节点的时候,最终在目标节点上触发这个事件,就是目标阶段。具体的元素本身。

    冒泡阶段:事件冒泡即事件开始时,由最具体的元素接收(也就是事件发生所在的节点),然后逐级传播到较为不具体的节点。跟捕获相反,具体元素本身,逐级向上,到页面元素(我们平时用的事件绑定就是利用的事件冒泡的原理)。

    事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发。

    事件冒泡:当使用事件冒泡时,子级元素先触发,父元素后触发。

    W3C : 任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达事件源,再从事件源向上进行事件捕获(事件冒泡)。

    标准浏览器:addEventListener("click",function,"true")方法,

    useCapture 默认为 false ,第三参数默认为false

    若第三参数为true,则采用事件捕获。若为false,则采用事件冒泡。

    IE浏览器只支持事件冒泡,不支持事件捕获,所以它不支持addEventListener("click",function,"true")方法,所以ie浏览器使用ele.attachEvent("onclick",doSomething)。

    事件传播的阻止方法:

    在W3C中,使用stopPropagation()方法。

    在IE下使用cancelBubble = true方法。

    阻止默认行为:

    在W3c中,使用preventDefault()方法。

    在IE下return false。

    展开全文
  • DOM事件流的三个阶段 起因 温故了一下我的《JavaScript高级程序设计》的时候,翻到DOM事件那一章,(说实话,现在无论是什么框架你都离不开操作DOM啊,毕竟这是你展示的最基本元素,就像人的细胞)。想起...
  • js有好多的知识需要不断积累,但是不能浅尝,应该深究其内因,... 捕获阶段的主要任务是建立传播路经,在冒泡阶段根据这路经回溯到文档根节点目标阶段 事件到达目标节点时,就到了目标阶段事件在目标节点上被触发
  • js事件三个阶段分别为:捕获、目标、冒泡    1.捕获:事件由页面元素接收,逐级向下,到具体的元素  2.目标:具体的元素本身  3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素  事件捕获:当使用...
  • 事件传播的三个阶段

    千次阅读 2016-02-26 15:18:39
    事件传播的三个阶段 第一阶段:从window对象传导到目标节点,称为“捕获阶段”(capture phase)。 第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。 第三阶段:从目标节点传导回window对象,称为...
  • 一、三个阶段 根据事件流类型,可以把事件传播的整个过程分为3个阶段,依次为: 事件捕获阶段 先由文档的根节点document往事件触发对象,从外向内捕获事件对象 目标阶段(目标对象本身的事件程序) 到达目标事件...
  • DOM事件流的三个阶段 起因 温故了一下我的《JavaScript高级程序设计》的时候,翻到DOM事件那一章,(说实话,现在无论是什么框架你都离不开操作DOM啊,毕竟这是你展示的最基本元素,就像人的细胞)。想起了dom...
  • DOM事件流的三个阶段

    千次阅读 2019-09-19 09:21:10
    事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一问题。那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一...
  • 最恰当的比喻:可以想象画在...捕获阶段 (从根节点开始顺着目标节点构建一条事件路径,即事件由页面元素接收,逐级向下,到具体的元素) 目标阶段 (到达目标节点,即元素本身) 冒泡阶段 (从目标节点顺着捕获阶段构建...
  • DOM事件三个阶段

    千次阅读 2018-08-30 21:40:15
     捕获阶段的主要任务是建立传播路经,在冒泡阶段根据这路经回溯到文档根节点 2. 目标阶段   事件到达目标节点时,就到了目标阶段事件在目标节点上被触发 3. 冒泡阶段  事件在目标节点上触发后,不会终止...
  • js中时间执行的整个过程称之为事件流,分为三个阶段事件捕获阶段,事件目标处理函数、事件冒泡。 当某歌元素触发某个事件(如:click),顶级对象document发出一个事件流,顺着dom的树节点向触发它的目标节点流去...
  • javascript事件三个阶段

    千次阅读 2016-11-04 10:47:02
    js事件三个阶段分别为:捕获、目标、冒泡 1.捕获:事件由页面元素接收,逐级向下,到具体的元素 2.目标:具体的元素本身 3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素 IE5.5:div---body---document...
  • DOM中事件三个阶段

    千次阅读 2019-01-20 15:29:45
    DOM中事件三个阶段,分别为 &nbsp;&nbsp;1.事件冒泡阶段:当嵌套的元素注册相同的事件时,里面得元素触发了事件,外面的元素的事件也触发了。即执行顺序是从内向外。 &nbsp;&nbsp;2.事件处于目标...
  • 文章目录一、eventflow 事件流大图二、基本概念2.1 event target 和 current event target2.2 capture、target、bubble phase三 事件三个阶段该如何理解?四 什么改变了event flow ?五,人们的误解六 ,到底什么是...
  • 一、事件流(捕获,冒泡) ...事件传播的三个过程,事件捕获阶段、处于目标阶段事件冒泡阶段事件捕获由远及近逐渐靠近事件目标,事件冒泡由事件目标逐渐向上冒泡 那是不是所有的事件都要经历...
  • DOM标准事件三个阶段

    千次阅读 2016-02-14 14:39:25
    /*事件一开始从文档的根节点流向目标对象(捕获阶段),然后在目标对向上被触发(目标阶段),之后再回溯到文档的根节点(冒泡阶段)。*/
  • 理解DOM事件流的三个阶段

    千次阅读 2018-03-27 13:02:42
    本文主要解决两个问题:什么是事件流DOM事件流的三个阶段起因在学习前端的大半年来,对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。在寒假深入学习JavaScript时,愈发觉得自己对DOM事件了解不够,遂...
  • 事件流及其三阶段

    千次阅读 2017-09-24 01:01:12
    事件三个阶段,首先发生的是捕获阶段,然后是目标阶段,最后才是冒泡阶段,对于捕获和冒泡,我们只能干预其中的一个,通常来说,我们可能会干预事件冒泡阶段,而不去干预事件捕获阶段。 1、事件捕获 事件...
  • 事件绑定与解绑: DOM0级事件(这类事件可以使用 return false来阻止事件往下执行,包含默认事件) ...DOM2级事件三个参数:事件名称,要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true),默认为冒泡...
  • 事件对象随事件流在DOM树上传播,DOM事件流分为三阶段:捕获,目标,冒泡 1、捕获阶段 事件传播由目标节点的祖先节点逐级传播到目标节点。先由文档的根节点document开始触发对象,最后传播到目标节点,从外向内捕获...
  • 浅谈区块链发展的三个阶段

    千次阅读 2020-09-03 10:58:55
    区块链发展的三个阶段 区块链在近年逐渐得到了不同国家的认可,并被认为是“世界的第九大奇迹”。 人们将区块链的发展分为三个阶段1.0阶段、 2.0阶段、3.0阶段。 区块链1.0阶段数字货币 区块链1.0阶段,主要应用在...
  • 互联网基础结构发展的三个阶段

    万次阅读 2019-03-04 14:43:21
    互联网的基础结构大体上分为三个阶段,这三个阶段并不是连续性的,有一些阶段部分重叠了,因为网络的演变是逐渐的。并不是某个日期就发生了。 第一个阶段 是从单个的网络向互联网发展的过程。1969年美国国防部...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 232,644
精华内容 93,057
关键字:

事件的三个阶段