jquery中的常用事件bind、hover、toggle等示例介绍


Posted in Javascript onJuly 21, 2014

1.$(document).ready()

$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异:

当一个文档完全下载到浏览器中时,会触发window.onload事件。而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕。

一个页面中一般只有一个onload事件处理程序,而且只能一次保存对一个函数的引用;而$(document).ready()是可以有多个。

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

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

$(document).ready(function(){ 

//thisis the coding... 

});


$().ready(function(){ 

//thisis the coding... 

});


$(function(){ 

//thisis the coding... 

});

2.事件绑定

语法

$(selector).bind(event,data,function)

参数和描述:

event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

data 可选。规定传递到函数的额外数据。

function 必需。规定当事件发生时运行的函数。

对应的有unbind():移除事件

Eg: $(‘#idchoose').unbind(“click”,Function_Name)

简写绑定事件:一般比较喜欢偏向简写

$("#dividelement").bind("click",function(){//do something})改写为:

$("#dividelement").click(function(){//do something }

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

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

$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher);

});

附带说下,用bind绑定事件的好处是可以定义自定义的事件,而且可以一次绑定多个事件。

3.合成事件

在进行事件捕获的时候,常常需要捕获组合的用户操作,并且以多个函数作为响应,这些事件我们称为复合事件。

jQuery提供的.ready()方法就是最常用的符合事件方法之一,除此之外,还有进行交互处理的时候用到的两个函数:

.hover(enter,leave) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

$(function(){

$("#panelh5.head").hover(function(){

$(this).next().show();

},function(){

$(this).next().hide(); 

})

})

.toggle(fn1,fn2,..fnN) 每次点击时切换要调用的函数。用于模拟鼠标连续单击事件。示例:

$(function(){

$("#panelh5.head").toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

4.事件对象与事件冒泡

事件对象:在程序中使用事件对象非常简单,只需要为函数添加一个参数,eg:

$(“element”).click(function(event){

//event:事件对象

})

当点击“element”元素时候,事件对象就被创建了。这个对象只有事件处理函数能访问。当事件处理函数执行完毕,事件对象就被销毁了。

事件捕获: 允许多个元素响应事件的一种策略。在事件捕获的过程中,事件首先会交给最外层的元素,接着再交给更具体的元素。 (body->div->span)

事件冒泡:另外一种相反的策略叫时间冒泡,当事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。事件冒泡有时候会产生副作用,导致始料不及的行为。 (span->div->body)

阻止事件冒泡的三种方法

通过调用.preventDefault()方法可以在出发默认操作之前终止事件。

调用event.stopPropagation()停止事件传播

jQuery提供了一个.stopPropagation()方法,使用该方法可以完全阻止事件冒泡。

5.使用event.tatget属性明确事件对象

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

使用event.tatget属性 明确事件对象阻止事件冒泡的代码如下:

$(document).ready(function(){ 

$('switcher').click(function(event){

if(event.target== this) 

{

$('switcher.button').toggleClass('hidden'); 

}

};)

});

其他事件对象属性可以参考w3c上的介绍。

Javascript 相关文章推荐
javascript 随机展示头像实现代码
Dec 06 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
AngularJS实现路由实例
Feb 12 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
JavaScript数组push方法使用注意事项
Oct 30 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 #Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 #Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 #Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 #Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 #Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 #Javascript
jquery显示隐藏input对象
Jul 21 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
详解python破解zip文件密码的方法
2020/01/13 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
求职自荐信格式
2013/12/04 职场文书
高中生的自我评价
2014/03/04 职场文书
班长演讲稿范文
2014/04/24 职场文书
综治工作心得体会
2014/09/11 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
干部考察材料范文
2014/12/24 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
python文件与路径操作神器 pathlib
2022/04/01 Python
app场景下uniapp的扫码记录
2022/07/23 Java/Android