`
carvin
  • 浏览: 212898 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于JavaScript/jQuery冒泡事件

阅读更多

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素。

事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。

目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素开始的。

事件的冒泡和捕获

捕获是从上级元素到下级元素,冒泡是从下级元素到上级元素.

在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.

var fnClick = function() {
alert(“Clicked!);
}
var oDiv = document.getElementById(“div1”);
oDiv.attachEvent(“onclick”, fnClick);
oDiv.detachEvent(“onclick”, fnClick);

事件的冒泡有什么好处呢?

想象一下现在我们有一个10列、100行的HTML表格,你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题,并且有可能导致内存泄露甚至是浏览器的崩溃。相反地,使用事件代理的话,你只需要把一个事件处理器添加到table元素上就可以了,这个函数可以把点击事件给截下来,并且判断出是哪个单元格被点击了。

代码很简单,我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素,ID是“report”,我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能,所以我们把它单独放到一个名为getEventTarget的函数中:

function getEventTarget(e) {
   e = e || window.event;
   return e.target || e.srcElement;
}

e这个变量表示的是一个事件对象,我们只需要写一点点跨浏览器的代码来返回目标元素,在IE里目标元素放在srcElemtn属性或event.toElement属性中,而在其它浏览器里则是target或event.relatedTarget属性。

接下来就是editCell函数了,这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后,剩下的事情就是看看它是否是我们所需要的那个元素了。

function editCell(e) {
   var target = getEventTarget(e);
   if(target.tagName.toLowerCase() === 'td') {
     // DO SOMETHING WITH THE CELL
   }
}

在editCell函数中,我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点;如果它是这个目标元素单元格里的另一个元素呢?我们需要为代码做一点小小的修改以便于其找出父级的td 元素。如果说有些单元格不需要被编辑怎么办呢?此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称,然后在把单元格变成可编辑状态之前先检查它是否不包含那个样式名称。选择总是多样化的,你只需找到适合你应用程序的那一种。

事件冒泡的优点和缺点:

1.那些需要创建的以及驻留在内存中的事件处理器少了。

这是很重要的一点,这样我们就提高了性能,并降低了崩溃的风险。

2.在DOM更新后无须重新绑定事件处理器了。

如果你的页面是动态生成的,比如说通过Ajax,你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。

潜在的问题也许并不那么明显,但是一旦你注意到这些问题,你就可以轻松地避免它们:你的事件管理代码有成为性能瓶颈的风险,所以尽量使它能够短小精悍。

不是所有的事件都能冒泡

blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。

需要注意的是:

如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了,因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

如何避免事件冒泡:

1.方法

Untitled

2.方法

在IE下解决问题很简单,用onMouseEnter、 onMouseLeave来代替onMouseOver、onMouseOut就行了,他们的作用基本相同,前者不会发生冒泡。但是 firefox下没有这两个事件.

3.方法:

window.event.cancelBubble = true (IE)   event.stopPropagation()  event.preventDefault() (Firefox)

阻止jQuery事件冒泡

jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

jQuery.Event的文档中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤。

jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();

$("p").click(function(event){
     event.stopPropagation();
     // do something
})

但是这个方法对使用live绑定的事件没有作用,需要一个更简单的方法阻止事件冒泡:return false;

$(this).after("Another paragraph!");
return false;  });
原文地址:http://www.imwls.com/about-javascript-jquery-event-propagation/
分享到:
评论

相关推荐

    JS/JQuery-第7章上机练习.zip

    在"JS/JQuery-第7章上机练习.zip"这个压缩包中,我们可以推测这是一份关于JavaScript和JQuery实践训练的资料,尤其聚焦于第七章的内容。通常,这样的练习会帮助开发者巩固和提升在实际项目中的应用能力。 1. **选择...

    jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片

    在本文中,我们将深入探讨如何使用jQuery的hover事件来创建一个独特的心形图片墙,当鼠标悬浮在图片上时,会产生动态效果。首先,我们需要理解jQuery库的基本概念以及hover事件的工作原理。 jQuery是一个广泛使用的...

    C# jQuery冒泡排序分析和理解(初级和基础)

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和AJAX交互。在这里,我们可以通过操作HTML中的表格或列表元素来动态显示排序过程。首先,我们需要将数据绑定到HTML元素,然后用jQuery事件监听用户触发...

    jquery阻止事件冒泡

    在JavaScript的世界里,事件冒泡是一个重要的概念,它是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)的过程。jQuery库提供了方便的方式来处理DOM...

    mylovw.rar_JavaScript/JQuery_JavaScript_

    理解事件冒泡和事件委托的概念,以及如何使用addEventListener和removeEventListener方法,是JavaScript事件处理的关键。 4. **JQuery核心功能**:JQuery提供了简洁的API来执行常见的DOM操作,如$(selector).html()...

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    本文将详细介绍如何使用原生JavaScript (JS) 和 jQuery 来阻止事件冒泡,并通过实际示例加深理解。 #### 二、JS 阻止事件冒泡的方法 ##### 1. 原生JS阻止事件冒泡 在原生JS中,阻止事件冒泡可以通过以下两种方式...

    精通JavaScript+jQuery(实例)

    jQuery则是一个流行的JavaScript库,它简化了DOM操作、事件处理、Ajax请求等常见任务。jQuery的核心特性包括选择器(用于高效地找到HTML元素)、DOM操作(如添加、删除或修改元素)、事件处理(绑定和解绑事件)以及...

    jquery_tips,JQ实现的冒泡提示

    二、JQuery冒泡提示的原理 冒泡提示,通常是指当鼠标悬停在某个元素上时,该元素周围会弹出一个包含提示信息的小窗口,就像水中的气泡一样。在jQuery中,我们主要通过CSS来定义提示框的样式,而JavaScript则负责...

    JS/JQuery-第6章上机练习.zip

    jQuery则是一个轻量级、高性能的JavaScript库,简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。 ### JavaScript基础 JavaScript是浏览器理解的语言,它负责赋予网页生命。主要知识点包括: 1. **变量与数据...

    《精通Javascript+jquery》(源代码)

    《精通JavaScript+jQuery》这本书是IT领域中关于前端开发的经典之作,主要涵盖了JavaScript语言的核心概念以及jQuery库的广泛使用。JavaScript是一种广泛应用于网页和互联网应用的脚本语言,而jQuery则是一个轻量级...

    jquery图片冒泡提示效果

    总结来说,jQuery图片冒泡提示效果是通过jQuery库实现的一种增强用户体验的交互设计,通过监听鼠标事件、动态创建和定位提示框、应用动画效果,为用户提供直观的信息展示,提升了网页的视觉吸引力和可用性。...

    jquery常用事件

    jQuery,作为一款强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在Web开发中,jQuery的事件处理是其核心功能之一,它使得开发者能够轻松响应用户的各种交互行为,如点击、...

    jQuery冒泡显示图标特效.zip

    综上所述,"jQuery冒泡显示图标特效.zip"是一个综合运用前端技术的项目,涉及到jQuery的事件处理和动画功能,CSS3的样式和动画效果,JavaScript的动态逻辑以及HTML5的结构和特性。学习并理解这个特效的实现,可以...

    《精通javascript+jquery》完整版:共计44.5M—part3

    jQuery则是一个高效、简洁的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。 JavaScript部分知识点包括但不限于: 1. **基础语法**:变量、数据类型(包括基本类型和引用类型)、...

    javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...

    《精通JavaScript+jQuery》书中实例

    2. **DOM操作**:JavaScript如何选取、修改和操作HTML元素,以及事件处理,包括事件冒泡和事件委托。 3. **Ajax**:异步数据交换,包括XMLHttpRequest对象的使用,JSONP,以及现代浏览器的fetch API。 4. **jQuery...

    精通JavaScript+jQuery电子书+源码-部分5

    4. **事件处理**:讲解JavaScript原生事件处理和jQuery事件处理的区别,包括事件委托、自定义事件以及阻止默认行为和事件冒泡。 5. **jQuery动画**:介绍如何使用jQuery创建复杂的动画效果,如淡入淡出、滑动效果等...

    jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

    在JavaScript和jQuery中,事件处理有两个关键概念:事件冒泡和事件委托。事件冒泡是指事件从最深的节点开始,然后逐级向上层元素传播事件。事件委托则是利用事件冒泡的特性,将事件处理器绑定到一个父元素上,以此来...

    javascript+jQuery手册

    3. **事件处理**:DOM事件,事件监听器,事件对象,事件冒泡和事件捕获。 4. **DOM操作**:选择元素(getElementById、querySelectorAll等),添加/删除元素,修改属性和样式。 5. **AJAX**:创建XMLHttpRequest对象...

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...

Global site tag (gtag.js) - Google Analytics