JQuery事件传播

jquery中一些事件函数使用小结,需要的朋友可以参考下。

1.$(document).ready() 
$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异: 
当一个文档完全下载到浏览器中时,会触发window.onload事件。而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕。 
一个页面中一般只有一个onload事件处理程序,而且只能一次保存对一个函数的引用;而$(document).ready()是可以有多个。

一般来说$(document).ready()都要优于使用onload事件处理程序。但是如果关联文件还没有加载完成,则类似图像高度、宽度的属性的调用就会有问题,因此需要在不同的时候选择合适的方法。

2. 事件捕获与事件冒泡 
事件捕获: 允许多个元素响应事件的一种策略。在事件捕获的过程中,事件首先会交给最外层的元素,接着再交给更具体的元素。 
事件冒泡:另外一种相反的策略叫时间冒泡,当事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。事件冒泡有时候会产生副作用,导致始料不及的行为。 
3.阻止事件冒泡的三种方法 
指定默认操作 
通过调用.preventDefault()方法可以在出发默认操作之前终止事件。 
调用 event.stopPropagation()停止事件传播 
jQuery提供了一个.stopPropagation()方法,使用该方法可以完全阻止事件冒泡。实例代码如下:

使用stopPropagation()方法阻止事件冒泡

4.常用的事件绑定 
jQuery通过使用.bind()方法为元素进行事件绑定,通过使用.unbind()方法为元素进行解除绑定。而且.bind()方法是可以执行多次绑定的,如果没有绑定,在进行解除绑定的时候,这都是安全的。

很多时候某一个事件只需要触发一次,随后就要立即解除绑定,按照传统的做法,我们可能会先进行事件绑定,然后在事件执行完毕后进行解除绑定。jQuery为我们提供了一种简写的方法.one来专门解决上述情景下的繁琐的代码编写,示例如下:

5.复合事件 
在进行事件捕获的时候,常常需要捕获组合的用户操作,并且以多个函数作为响应,这些事件我们称为复合事件。 
jQuery提供的.read()方法就是最常用的符合事件方法之一,除此之外,还有进行交互处理的时候用到的两个函数: 
.hover(over,out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。 
.toggle(fn,fn) 每次点击时切换要调用的函数。

时间: 2024-10-11 12:05:43

JQuery事件传播的相关文章

jQuery事件传播,事件流

一. jQuery事件传播 在DOM2级事件模型中,一旦事件被触发.事件流首先从DOM树顶部(文档节点)向下传播.直到目标节点.然后再从目标节点向上传播到DOM树顶.从上到下的过程被称为捕获阶段.从下到上的过程被称为冒泡阶段. 利用循环体结构分别为button元素及其全部父级节点注冊一个捕获型鼠标单击类事件处理函数. 代码演示样例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

jQuery事件篇---高级事件

内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. //点击按钮事件 $('input').click(function () { alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('inp

jQuery事件代理

DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行,什么意思,就是说开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档) $('a').bind('click', function() { alert("That tickles!") }); 因此一

jquery 事件冒泡的介绍以及如何阻止事件冒泡

原文地址:http://www.jb51.net/article/32792.htm 什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一

jquery事件模型

大多数工具类都会提供标准入口和快捷方式,jquery事件模型也不例外 jquery1.0标准入口 属于jquery工具方法,通过$.event可查看 一个标准的事件大致就会经历这样的流程 如果对事件的传播进一步进行代理就还需要一个fix,重新制作代理以及取消默认行为 jquery1.0快捷入口 通过初始化方式,将标准工具方法,转换为实例方法而后 再一次产生更加快捷的方法,至此,通过jquery实例方法有2中调用方式 1.$().bind(type,fn) 2.$().onclick(fn) 在1

jQuery事件整理回顾

一.事件 1.加载DOM $(document).ready() 这个第一节里详细介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口,用来为每一个匹配元素绑定事件处理程序.其基本语法:bind(type,[data],fn); 其中参数type表示事件类型,参数data是可选参数,它可以作为event.data属性值传递给事件对象的额外数据对象.参数fn表示事件处理函数. 例如下例中为p元素绑定单击事件,当点击不同段落文本的时候会提示不同段落文本的内容: [html] vie

jQuery事件绑定和委托实例

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() 复制代码代

完美的jquery事件绑定方法on()

在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法: .live() jQuery 1.3新增的live()方法,用法如下: $("#info_table td").live("click",function(){/*显示更多信息*/}); 这里的.live()方法会把click事件绑定到$(document)对象,而且只需要给$(document)绑定一次,然后就能够处理后续动态加载的单元格的单击事件.在接收到任何事件时,$(document)