初窥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 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
初窥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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
angular.element方法汇总
2015/01/07 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python监控键盘输入实例代码
2018/02/09 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
大学新生欢迎词
2014/01/10 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
民事和解协议书格式
2014/11/29 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
护士个人年度总结范文
2015/02/13 职场文书
党员公开承诺书2016
2016/03/24 职场文书