锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)


Posted in Javascript onMarch 24, 2010

一、事件

1 加载DOM

$(document).ready(function(){//...}) 
DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} 
$(window).load(function(){//...}) 
window内所有对象加载完毕后执行,几等同window.onload=function(){//...}。也可针对selector使用此方法

另:$(document).ready(function(){//...})的简写方式:$(function(){//...})或$().ready(function(){//...})

2 事件绑定

$("selector").bind() 
为元素绑定事件,格式:bind(type[,data],fn),可多次调用 
type事件类型包括:blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error或者自定义事件 
简写方法:$("selector").bind(type,function(){//...})等价于$("selector").type(function(){//...}) 
可传递data参数以供unbind特定事件之用 
$("selector").is() 
判断方法

(外:方法多次重用可定义局部变量 var $x = $("selector").方法())

3 合成事件

$("selector").hover(enter,leave) 
模拟光标悬停事件,鼠标进入时触发enter事件,鼠标移出时触发leave事件(代替的是bind("mouseenter")和bind("mouseleave")) 
使用方法:$("selector").hover(function(){//enter case...},function(){//leave case...}) 
(外:IE6不支持除a标签外css的:hover伪类的问题——可用此hover事件作为hack来解决) 
$("selector").toggle(fn1,fn2,...,fnN) 
模拟鼠标连续单击事件,按照单击顺序按次序循环执行事件 
使用方法:$("selector").toggle(function(){//case1...},function(){//case2...},...,function(){//caseN}) 
特殊用法:切换元素可见状态,如元素隐藏,单击toggle触发元素可使之可见;元素可见,单击toggle触发元素使之隐藏

P108例:
<script> 
$(function(){ 
$("panel h5.head").toggle(function(){ 
$(this).next().toggle(); 
},function(){ 
$(this).next().toggle(); 
}) 
}) 
</script>

4 事件冒泡

$("selector").bind("type",function(event){//event:事件对象...})
event事件对象:只有此函数内部才能访问到,事件处理函数执行完毕后,事件对象就被销毁
event.stopPropagation()
在函数最后用来停止事件冒泡
P111例:

<script> 
$('span').bind("click",function(event){ 
var txt = $('msg').html() + "<p>内层span元素被单击</p>"; 
$('#msg').html(txt); 
event.stopPropagation(); 
}) 
</script> 
event.preventDefault()

阻止元素默认行为
例:验证表单(input为空阻止提交并提示)
<script> 
$(function(){ 
$("#submit").bind("click",function(event){ 
var username=$("#username").val(); 
if(username==""){ 
$("#msg").html("<p> 文本框的值不能为空</p>"); 
event.preventDefault(); 
} 
}); 
}) 
</script>

return false;
同时对对象事件停止冒泡和默认行为,等价于同时调用stopPrapagation()和preventDefault()
(外:事件捕获和事件冒泡是相反的过程,事件捕获是从DOM顶端往下开始触发,jQuery不支持,故本书从略)

5 事件对象的属性

event.type
获取事件类型
例:

<script> 
$("a").click(function(event){ 
alert(event.type); 
return false; 
}) 
</script>

上面返回"click"
event.target
获取触发事件的元素
例:
<script> 
$("a[href=http://baidu.com]").click(function(){ 
alert(event.target.href); 
return false; 
}) 
</script>

上面返回"http://baidu.com"
event.relatedTarget
访问事件相关元素
event.pageX / event.pageY
获取光标相对于页面的x坐标和y坐标
event.which
在鼠标单击事件中获取鼠标的左、中、右键;在键盘事件中获取键盘的按键(返回值1=鼠标左键;2=鼠标中键;3=鼠标右键)
event.metaKey
键盘事件中获取<ctrl>按键
event.originalEvent
指向原始的事件对象

6 移除事件

$("selector").unbind()
移除元素上的事件,格式:$("selector").unbind([type][,data]);(如果没有参数,则删除所有绑定的事件;如果提供了事件类型参数,则只删除该类型的绑定事件;如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除)
例:

<script> 
$(function(){ 
$('#btn').bind("click",myFun1=function(){ //先绑定 
$('#test').append("..."); 
}); 
}) 
</script> 
<script> 
$('#delOne').click(function(){ 
$('#btn').unbind("click",myFun1); //后删除 
}) 
</script>

$("selector").one()
绑定一个触发一次即被删除的事件,格式:$("selector").one(type[,data],fn);

7 模拟操作

$("selector").trigger("type");
模拟用户交互动作,简写方法:$("#selector").type(); 格式:$("selector").trigger(type[,data])
例:用单击替代鼠标经过

<script> 
$("selector").mouseover(function{//...}); 
$("selector2").click(function(){ 
$("selector").trigger("mouseover"); //或者$("selector").mouseover() 
}) 
</script>

自定义事件的例子
<script> 
$("selector").bind("myClick",function(){//...}); //绑定自定义事件 
$("selector").trigger("myClick"); //触发自定义事件 
</script> 
$("selector").trigger(type[,data])

可以数组形式传递参数给回调函数
P119例:
<script> 
$("#btn").bind("myClick",function(event,message1,message2){ 
$("#test").append("<p>"+message1+message2+"</p>"); 
}); 
$("#btn").trigger("myClick", ["我的自定义","事件"]); 
</script>

8 其他用法

$("selector").bind("type1 type2",function(){//...})
一次性绑定多个事件类型
P119值得一看的例子

<script> 
$(function(){ 
$("div").bind("mouseover mouseout",function(){ 
$(this).toggleClass("over"); //切换class 
}); 
}) 
</script>

$("selector").bind("type.命名空间",function(){//...})
为多个事件添加事件命名空间,便于管理,删除命名空间后,命名空间下的事件同时删除,如:
$("div").bind("mouseover.plugin",function(){//...})
$("div").bind("click.plugin",function(){//...})
$("div").unbind(".plugin");
$("selector").trigger("type!")
"!"用来选择匹配不包含在命名空间中的type方法
Javascript 相关文章推荐
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
js处理表格对table进行修饰
May 26 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
ES6关于Promise的用法详解
May 07 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 #Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 #Javascript
Javascript中Eval函数的使用
Mar 23 #Javascript
JavaScript Eval 函数使用
Mar 23 #Javascript
js本身的局限性 别让javascript做太多事
Mar 23 #Javascript
js parentElement和offsetParent之间的区别
Mar 23 #Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 #Javascript
You might like
PHP运行模式的深入理解
2013/06/03 PHP
PHP中header用法小结
2016/05/23 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
js 操作符实例代码
2009/10/24 Javascript
js function定义函数使用心得
2010/04/15 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
图片加载完成再执行事件的实例
2017/11/16 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python学生信息管理系统
2018/03/13 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
企业管理培训感言
2014/01/27 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
社区灵活就业证明
2014/11/03 职场文书