jqueryon冒泡,jq阻止事件冒泡的方法

jquery中on()方法和live()方法的区别

一、作用不同

博罗网站建设公司创新互联建站,博罗网站设计制作,有大型网站制作公司丰富经验。已为博罗上1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的博罗做网站的公司定做!

1、on():在被选元素及子元素上添加一个或多个事件处理程序。

2、live():为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

二、触发条件不同

1、on():使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

2、live():通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

三、语法不同

1、on():$(selector).on(event,childSelector,data,function)childSelector可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。

2、live():$(selector).live(event,data,function),其中event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

参考资料来源:百度百科-jQuery

jquery on是冒泡还是委托

可以通过以下三种方法做到不同程度的阻止。

A:return false ---In event handler ,prevents default behavior and

event bubbing 。

return false 在事件的处理中,可以阻止默认事件和冒泡事件。

B:event.preventDefault()--- In event handler ,prevent default

event (allows bubbling) 。

event.preventDefault()在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。

C:event.stopPropagation()--- In event handler ,prevent bubbling

(allows default behavior).。

event.stopPropagation()在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

事件冒泡是什么如何用jquery阻止事件冒泡

(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怎么写事件冒泡

事件冒泡不需要写,浏览器就是这样的机制,只是要学会利用

什么是JS事件冒泡?

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

如何来阻止Jquery事件冒泡?

通过一个小例子来解释

复制代码代码如下:

%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""

htmlxmlns=""

headrunat="server"

titlePorschev---Jquery事件冒泡/title

scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"/script

/head

body

formid="form1"runat="server"

divid="divOne"onclick="alert('我是最外层');"

divid="divTwo"onclick="alert('我是中间层!')"

aid="hr_three"href=""mce_href=""onclick="alert('我是最里层!')"点击我/a

/div

/div

/form

/body

/html

比如上面这个页面,

分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;

他们都有各自的click事件,最里层a标签还有href属性。

运行页面,点击“点击我”,会依次弹出:我是最里层----我是中间层----我是最外层----然后再链接到百度.

这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。

事件冒泡过程(以标签ID表示):hr_three----divTwo----divOne。从最里层冒泡到最外层。

如何来阻止?

1.event.stopPropagation();

复制代码代码如下:

scripttype="text/javascript"

$(function(){

$("#hr_three").click(function(event){

event.stopPropagation();

});

});

script

再点击“点击我”,会弹出:我是最里层,然后链接到百度

2.returnfalse;

如果头部加入的是以下代码

复制代码代码如下:

scripttype="text/javascript"

$(function(){

$("#hr_three").click(function(event){

returnfalse;

});

});

script

再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面

由此可以看出:

1.event.stopPropagation();

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)

2.returnfalse;

事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

还有一种有冒泡有关的:

3.event.preventDefault();

如果把它放在头部A标签的click事件中,点击“点击我”。

会发现它依次弹出:我是最里层----我是中间层----我是最外层,但最后却没有跳转到百度

它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

jQuery事件冒泡及解决办法

什么是事件冒泡:在一个对象上触发某类事件(比如onclick事件),如果次对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

事件冒泡的作用:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡:事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止

$(function(){

})

代合并阻止操作:实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用.

// event.stopPropagation();

// event.preventDefault();

// 合并写法:

return false;

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法:bind

事件委托的写法:

如果我们要取消事件的委托:

//ev.delegateTarge 委托的对象

$(ev.delegateTarge).undelegatee();

//如果是上面的两种例子可使用//$list.undelegate();

创建节点: ('div')

var ('div这是一个div元素/div');

插入节点:

1、append()和appendTo():在现存元素的内部,从后面插入元素

2、prepend()和prependTo():在现存元素的内部,从前面插入元素

3、after()和insertAfter():在现存元素的外部,从后面插入元素

4、before()和insertBefore():在现存元素的外部,从前面插入元素

删除节点

$('#div1').remove();


分享名称:jqueryon冒泡,jq阻止事件冒泡的方法
转载注明:http://pwwzsj.com/article/dsihooj.html