初窥JQuery(二) 事件机制(1)


Posted in Javascript onNovember 25, 2010

当然它的优点并不只在于这点,使用JQuery事件处理机制比直接使用Javascript本身内置的一些事件相应方式更加的灵活,更加不容易暴露在外,而且有更加优雅的语法,大大减少了我们工作的量度。

JQuery的事件处理机制包括:页面加载、事件绑定、事件委派、事件切换四种机制。我们先从$(document).ready()事件开始。

  一、页面加载$(document).ready()相当与Javascript中的onLoad()事件,都是在页面加载的时候执行该方法,但是两者又有着微妙的差别,ready()事件是当HTML下载完成并解析成DOM树之后就可以执行,而onLoad()事件要等HTML包括文件都下载完成之后才能执行。我们在ready()事件中可以绑定其他的一些事件或者函数,ready()有几种语法可以表示:

$(document).ready(function(){});

$().ready(function(){});

$(function(){});

当然我个人还是习惯于用第一种,增强可读性,需要注意的是在使用ready()事件的时候请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。也可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

二、事件切换只有两个方法,就是hover()和toggle()两个方法,由于他们截取组合的用户操作,并且以多个函数响应,因此也称为复合事件处理机制。hover()方法是一个模仿鼠标悬停变化的方法,简单的说就是鼠标移入移出是时候执行你指定的行为的方法,我们最常用的就是做菜单切换效果。toggle()方法就是当你点击按照顺序执行你指定的函数方法,第一次点击执行第一个函数,第二次点击执行第二个函数,以此类推,它可以使用事件绑定中的unbind('click')方法删除。

hover(over,out)实例:

<style type="text/css"> 
#Menu 
{ 
background-color:Red; 
width:150px; 
height:30px; 
text-align:center; 
border:solid 1px black; 
} 
#Menu_child 
{ 
width:150px; 
border:solid 1px black; 
display:none; 
} 
#Menu_child div 
{ 
background-color:#f3f3f3; 
width:150px; 
height:30px; 
text-align:center; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$("#Menu").hover( 
function() { 
$("#Menu_child").fadeIn(); 
}, 
function() { 
$("#Menu_child").fadeOut(); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="Menu">JQuery事件处理</div> 
<div id="Menu_child"> 
<div>页面加载</div> 
<div>事件绑定</div> 
<div>事件委派</div> 
<div>事件切换</div> 
</div> 
</body>

toggle(fn,fn)实例:
HTML代码 
<input type="button" value="toggle()方法" id="toggle" /> 
JQuery代码 
$("#toggle").toggle( 
function() { 
alert("第一次点击"); 
}, 
function() { 
alert("第二次点击"); 
}, 
function() { 
alert("第三次点击"); 
}, 
function() { 
alert("第四次点击"); 
});

三、事件委派中也只有两个方法,live()和die()两个方法,这两个方法是1.3版本之后才新增的,之前的版本是没有的。live()可以理解成元素组事件委派方法,比如li元素用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用,而无需重新给这种新增加的元素绑定事件,在编写树形插件的时候相当有用。die()方法就很好解释,用来解除live()绑定的方法。

live(type,fn):live()中type参数目前只支持click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup事件。实例如下

HTML代码: 
<ul> 
<li>页面加载</li> 
<li>事件绑定</li> 
<li>事件委派</li> 
<li>事件切换</li> 
</ul> 
JQuery代码: 
$("li").live('click', function() { 
var index = $("li").index(this);//获取li的索引 
var text = $("li").eq(index).text();//根据单击项索引获得文本值 
alert("索引:" + index + ",文本值:" + text); 
});

die([type],[fn]):die()使用起来相当简单,一种删除所有live()事件,一种指定删除,两个参数是可选的。
$("#die").click(function() { 
$("li").die(); //删除所有live()事件 
$("li").die("click");//删除指定为click的live()事件 
$("li").die('click', function() { alert("删除live()事件成功") });//删除指定为click的live()事件并执行函数 
});

仅供参考,欢迎感兴趣的朋友参与讨论。下篇文章再说事件绑定,写一起太长了。未完待续........
Javascript 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
使用正则替换变量
May 05 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 #Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 #Javascript
学习并汇集javascript匿名函数
Nov 25 #Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 #Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 #Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 #Javascript
HTML颜色选择器实现代码
Nov 23 #Javascript
You might like
php安全配置 如何配置使其更安全
2011/12/16 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
js精度溢出解决方案
2012/12/02 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python爬取三国演义的实现方法
2016/09/12 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python 追踪except信息方式
2020/04/25 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
购房协议书
2014/04/11 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
公司保洁员管理制度
2015/08/04 职场文书