即引发这个事件的对象

(1)什么是事件起泡
第一你要理解有个别,当八个平地风波时有发生的时候,该事件三番一回有贰个事件源,即吸引这么些事件的目的,三个事变无法凭空发生,那正是事件的发出。

当事件产生后,这么些事件就要开头传入。为啥要传播呢?因为事件源本身并从未处管事人件的力量。比如我们点击贰个开关时,就能够发出二个click事件,但以此开关本人无法管理那几个事件(废话),事件必需从那几个开关传播出去,进而达到能够管理这些事件的代码中(比如大家给开关的onclick属性赋三个函数的名字,便是让那几个函数去处理该开关的click事件)。

当事件在传诵进度中,找到了多个能够管理它的函数,那时候大家就说这么些函数捕捉到了这些事件。

谈起那边,关键的难题来了,那便是一个函数是怎么着捕捉三个风云的啊?那就关系到事件的冒泡了。

为了更加好地明白冒泡的定义,作者建议您将来想象一下您的先头放着一杯水,但那杯水和我们平时看来的有一点点点不相同,它分为数层,每一层又分为一或多个区域,最顶层是大家耳濡目染的窗口对象(即window对象),下一层分为许多少个区域(document对象、history对象等等),而document对象的下一层又分为多身长对象。

那么些目的的等级次序关系结合了DOM中的对象树。
事件的流传是有来头的,当点击叁个开关时所爆发的事件从这几个开关处最初提升传播(就像一个水泡从杯底冒上来,那正是由此叫事件冒泡的缘故),但以那件事件三翻五次寻觅特定的品质是不是有值。举个例子开关的click事件先找找在按键上是或不是有onclick属性的有意义的定义(即该属性指向叁个留存的函数或一段可推行的讲话),假诺有,实行这一个函数或讲话;然后事件继续前行传播,到达开关的上一层对象(举例五个form对象或document对象,同理可得是满含了开关的父对象),如若该对象也定义了onclick属性,则进行属性的值。

于是,假诺这些开关上面有3层(form、document、window),且那三层都定义了onclick属性,则当开关的click事件时有发生时,将会调用4个(满含按键本人的贰个)函数或举行4段语句。
事件的那多少个特色在0级dom中也是适用的。

(2)jquery阻止事件起泡实例
1、通过重返false来撤废暗中认可的一颦一笑并截留事件起泡。
jQuery 代码:

复制代码 代码如下:

$("form").bind(
  "submit",
  function() {
    return false;
   }
);

2、通过选用 preventDefault() 方法只收回私下认可的一言一行。
jQuery 代码:

复制代码 代码如下:

$("form").bind(
  "submit",
  function(event){
    event.preventDefault();
  }
);

3、通过行使 stopPropagation() 方法只阻止两个事变起泡。
jQuery 代码:

复制代码 代码如下:

$("form").bind(
  "submit",
  function(event){
    event.stopPropagation();
  }
);

(3)关于js事件起泡的验证
明日以此难题至关心珍视要涉嫌到几个首要词:对象,触发事件,捕获事件,实施管理、起泡。那实则便是一切js实践的经过。其中冒泡这些进程很有趣。其实就像一杯水,可是那杯水是分档期的顺序的,最上边是当下触及事件的靶子。然后越往上限定越大,最顶层肯定是window,尾数第二层是document。气泡在漂移进程中会决断当前所到达的层有未有绑定事件管理方法。有话就实施相应的管理。未有的话就此起彼落起泡。直到到达最顶层的window窗口层。大家得以在其余一层做相应的拍卖以阻止事件继续起泡。方法便是调用事件指标的遏止起泡的秘技。event.stopPropagation();下边是写的二个验证js事件起泡的进程方法。

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function(){
$('.one').click(function(e){
alert('one');
});            
$('.two').click(function(e){  
alert('two');
});
$('.three').click(function(e){
alert('three');
//阻止起泡裁撤下边包车型大巴表明
// e.stopPropagation();
});
});
</script>
<div class="one" style="width:200px;height:200px;background:green;">
one
<div class="two" style="width:150px;height:150px;background:yellow;">
two
<div class="three">
three
</div>
</div>
</div>

(4)总结
1.一个事变起泡对应触发的是上层的同样事件
  特殊:假若two设置成双击事件,那么在您单击two的时候就能起泡触发one单击的事件
  (双击包括单击)。
2.只要在click事件中,在您要管理的事件在此以前拉长e.preventDefault();
 那么就收回了作为(通俗明了:也正是做了个return操作),不试行之后的语句了。
3.e.stopPropagation()只要在click事件中,就不会触发上层click事件。

您大概感兴趣的小说:

  • jquery 事件冒泡的介绍以及哪些阻止事件冒泡
  • Jquery阻止事件冒泡 event.stopPropagation
  • js阻止冒泡及jquery阻止事件冒泡示例介绍
  • jquery关于事件冒泡和事件委托的技术及阻止与允许事件冒泡的三种达成格局
  • 浅谈jQuery 中的事件冒泡和阻碍暗中同意行为
  • 采纳JQuery阻止事件冒泡
  • jQuery阻止事件冒泡具体完毕
  • JQuery中截留事件冒泡两种方法及其区别介绍
  • 贰个小例子解释怎么样来堵住Jquery事件冒泡
  • jQuery阻止事件冒泡实例分析

本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:即引发这个事件的对象

您可能还会对下面的文章感兴趣: