Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

Posted 2020-07-01 attilaxAti

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

 

1. 事件冒泡1

2. 事件捕获1

3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1

4. 事件代理3

5. 冒泡还是捕获？3

6. Js 冒泡事件阻止3

6.1. 返回false5

7. 事件冒泡 使处理函数有范围较大的触发面积，在“拖拽效果”脚本中是必须的5

8. refe6

8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6

 

 

 

1. 事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

 

 

2. 事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素

作者::  ★(attilax)>>>   绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙，  EMAIL:[e-mail]

转载请注明来源： http://www.cnblogs.com/attilax/

 

3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数

W3C模型

　　W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

　　如果用户单击元素2，则接下来会发生：

　　（事件在这里就像一个观光客，由外至内游览，逐渐接近被触发的主要元素，然后又反向离开）

　　单击事件首先进入捕获阶段开始（逐渐接近元素2的方向）。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的

　　发现元素1有一个，于是doSomething2被执行

　　事件检查到目标自己（元素2），捕获阶段没有发现更多的处理函数了。事件开始进入冒泡阶段，想当然执行doSomething（），这个绑定于元素2冒泡阶段的函数。

　　事件向远离元素2的方向，查看是否有任何祖先元素在冒泡阶段绑定了一个处理函数。没有这样的情况，所以什么也没有发生

　　相反的情况是：

 

“DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段，而作为开发者，我们可以选择事件处理函数在哪一个阶段被调用。

addEventListener方法用来为一个特定的元素绑定一个事件处理函数，是javascript中的常用方法。addEventListener有三个参数：

element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件，第二个参数是触发事件后要执行的函数。而第三个参数默认值是false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，则表示在事件捕获阶段调用处理函数。请看例子。

4. 事件代理

使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素（如：a、span等），我们不必再一次循环给每一个元素绑定事件，直接修改事件代理的事件处理函数即可。

 

 

5. 冒泡还是捕获？

对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。

 

 

6. Js 冒泡事件阻止

 

1. 事件目标

现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写下列代码：
$(document).ready(function(){
 $(\'#switcher\').click(function(event){
  $(\'#switcher .button\').toggleClass(\'hidden\');
  })
 })
  
$(document).ready(function(){
 $(\'#switcher\').click(function(event){
  if(event.target==this){
  $(\'#switcher .button\').toggleClass(\'hidden\');
  }
  })
 })
此时的代码确保了被单击的元素是<div id="switcher"> ，而不是其他后代元素。现在，单击按钮不会再

折叠样式转换器，而单击边框则会触发折叠操作。但是，单击标签同样什么也不会发生，因为它也是一个后代元素。实际上，我们可以不把检查代码放在这里，而是通过修改按钮的行为来达到目标 。

2. 停止事件传播

事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。与.target类似，这个方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用 。不过，只要我们通过jQuery来注册所有的事件处理程序，就可以放心地使用这个方法。

下面，我们会删除刚才添加的检查语句event.target == this，并在按钮的单击处理程序中添加一些代码：

$(document).ready(function(){
 $(\'#switcher .button\').click(funtion(event){
  //……
   event.stopPropagation();
  })
 }) 

  同以前一样，需要为用作单击处理程序的函数添加一个参数，以便访问事件对象。然后，通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来，单击按钮的事件会被按钮处理，而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。

3. 默认操作

如果我们把单击事件处理程序注册到一个锚元素，而不是一个外层的<div>上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。

如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事，因为默认操作不是在正常的事件传播流中发生的。在这种情况下，.preventDefault()方法则可以在触发默认操作之前终止事件 。

提示 当在事件的环境中完成了某些验证之后，通常会用到.preventDefault()。例如，在表单提交期间，我们会对用户是否填写了必填字段进行检查，如果用户没有填写相应字段，那么就需要阻止默认操作。我们将在第8章详细讨论表单验证。

事件传播和默认操作是相互独立的两套机制，在二者任何一方发生时，都可以终止另一方。如果想要同时停止事件传播和默认操作，可以在事件处理程序中返回false，这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

6.1. 返回false

7. 事件冒泡 使处理函数有范围较大的触发面积，在“拖拽效果”脚本中是必须的

设置页面？——使处理函数有范围较大的触发面积，在“拖拽效果”脚本中是必须的。一般来说在某一个元素层上发生mousedown事件意味着选择了这个元素，并且使它能够响应mousemove事件。虽然mousedown通常绑定于这个元素层上以避免浏览器 bug，但是其他两者的事件函数的范围必须是整个页面（？）

　　记住浏览器学的第一法则（First Law of Browserology）是：一切皆有可能（anythingcan happen），并且是在你起码有点准备的时候。所以有可能发生的是，用户拖拽时，大幅度在页面上移动他的鼠标，脚本却不能在大幅度中做出反应，以至于鼠 标也就不再停留在元素层上了

　　如果onmouseover处理函数绑定在元素层上，这个元素层不会再对鼠标的移动有任何反应，这会让用户觉得奇怪

　　如果onmouseup处理函数绑定在元素层上，事件也不能被触发，后果是，用户想放下这个元素层后，元素层持续对鼠标移动做出反应。这会引起（用户）更多的迷惑（？）

　　所以在这个例子中，事件冒泡非常的有用，因为将你的处理函数放在页面层能保证他们一直能被执行

 

8. refe

8.0.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault

事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 {代码...} 上面的代码当中一个...

浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault.html