文档章节

总结jquery使用事件(复合事件、事件绑定等)

^6^|^6^
 ^6^|^6^
发布于 2011/12/09 13:43
字数 1129
阅读 430
收藏 1

本文整理总结jquery事件,在使用jquery开发中,一定会使用到事件,下面是常用的事件。

1.$(document).ready()
$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异:
 当一个文档完全下载到浏览器中时,会触发window.onload事件。而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕。
一个页面中一般只有一个onload事件处理程序,而且只能一次保存对一个函数的引用;而$(document).ready()是可以有多个。
一般来说$(document).ready()都要优于使用onload事件处理程序。但是如果关联文件还没有加载完成,则类似图像高度、宽度的属性的调用就会有问题,因此需要在不同的时候选择合适的方法。

$(document).ready()有三种写法,分别是:

 JS Code  [http://www.xueit.com]

    
> $(document).ready( function () { // this is the coding... }); > $().ready( function () { // this is the coding... }); > $( function () { // this is the coding... });

2. 事件捕获与事件冒泡
事件捕获: 允许多个元素响应事件的一种策略。在事件捕获的过程中,事件首先会交给最外层的元素,接着再交给更具体的元素。
事件冒泡:另外一种相反的策略叫时间冒泡,当事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。事件冒泡有时候会产生副作用,导致始料不及的行为。

3.阻止事件冒泡的三种方法 
指定默认操作
通过调用.preventDefault()方法可以在出发默认操作之前终止事件。

调用 event.stopPropagation()停止事件传播
jQuery提供了一个.stopPropagation()方法,使用该方法可以完全阻止事件冒泡。实例代码如下:
使用stopPropagation()方法阻止事件冒泡

 JS Code  [http://www.xueit.com]

    
$(document).ready( function () { $( ' switcher ' ).click( function (event){ if ( this .id == ' switcher-narrow ' ){ $( ' body ' ).addClass( ' narrow ' ); } else if ( this .id == ' switcher-large ' ){ $( ' body ' ).addClass( ' large ' ); } $( ' switcher .button ' ).romoveClass( ' selected ' ); $( this ).addClass( ' selected ' ); event.stopPropagation(); };) });

使用event.tatget属性 明确事件对象
事件处理程序中的变量event保存着事件对象。而event.tatget属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素。而且,我们知道this引用的是处理事件的DOM元素。
使用event.tatget属性 明确事件对象阻止事件冒泡的代码如下:

 JS Code  [http://www.xueit.com]

    
$(document).ready( function () { $( ' switcher ' ).click( function (event){ if (event.target == this ) { $( ' switcher .button ' ).toggleClass( ' hidden ' ); } };)

});

4.常用的事件绑定 jQuery通过使用.bind()方法为元素进行事件绑定,通过使用.unbind()方法为元素进行解除绑定。而且.bind()方法是可以执行多次绑定的,如果没有绑定,在进行解除绑定的时候,这都是安全的。 很多时候某一个事件只需要触发一次,随后就要立即解除绑定,按照传统的做法,我们可能会先进行事件绑定,然后在事件执行完毕后进行解除绑定。jQuery为我们提供了一种简写的方法.one来专门解决上述情景下的繁琐的代码编写,示例如下:

 JS Code  [http://www.xueit.com]
       
    
        
$(document).ready( function (){ $( ' #swotcjer ' ).one( ' click ' ,toggleStyleSwitcher); });

5.复合事件

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

本文转载自:http://www.xueit.com/js/show-5310-2.aspx

^6^|^6^
粉丝 2
博文 14
码字总数 203
作品 0
杭州
私信 提问
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0
使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画

1、 jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件分类 ●基础事...

逆風〠飛翔
2018/08/07
0
0
jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()

在 jQuery的开发过程中,我们往往需要处理各种事件,例如,click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将 这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如...

kisshua
2012/04/20
277
0
关于jQuery新的事件绑定机制on()的使用技巧

本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧。需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引...

Idiot_s_Sky
2014/01/11
133
0
jQuery学习四 事件与事件对象

一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. .事件与事件对象 首先看一下我们经常使用的添加事件的方式: <!D...

天行健J
2012/12/10
118
0

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 的项目导入到 IntelliJ 后子项目源代码不能导入

在一个 Gradle 项目中,有若干子项目。 当 Gradle 到如后,子项目不能被 IntelliJ 识别代码。 如下图的这个代码就没有被自动识别。 这个有可能是因为你的这个子项目没有被添加到父项目中。 ...

honeymoose
22分钟前
3
0
苹果cms下载地址及模板地址

https://github.com/magicblack/maccms10 程序下载: https://www.lanzous.com/b204882 教程下载: https://www.lanzous.com/b256378 模板下载: https://www.lanzous.com/b355667 插件下载:......

chenhongjiang
22分钟前
3
0
Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件)

一、HttpPost上传文件 public static String getSuffix(final MultipartFile file){ if(file == null || file.getSize() == 0){ return null; } String......

codeobj
23分钟前
3
0
在Word中怎样批量删除空行,这些点主要注意

在工作中经常接触的办公软件就是Word了,熟练使用Word中的技能是准时下班的保证。这就要求我们对Word中的各项技能都熟练于心,很多朋友诉苦Word中的排版不熟悉,每次写一篇文章排版都要花费很...

干货趣分享
29分钟前
2
0
终端-Linux命令之非交互SSH密码验证-Sshpass

> Sshpass是使用SSH所谓的“交互式键盘密码身份验证”以非交互方式执行密码身份验证的工具 通俗来说就是 使用ssh密码登录 是需要在连接时手动输入密码的,没办法明文连接,如下图,需要交互的...

极客收藏夹
33分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部