jQuery学习教程(八):事件
2011-07-22 07:05
274 查看
绑定事件
jQuery绑定事件方法:
bind(type[,data],fn)//type:
事件类型;data:作为event.data传递给对象的参数;fn:绑定的处理函数
示例,在《锋利的jQuery》一书中讲到了这个例子:
该例子是用来实现点击上面文字隐藏或显示下面文字,经过测试发现只能显示无法隐藏。可能是上面的$(this)函数默认为匿名函数指向的是$(this).next("div.content")了。因此经过改进后的函数修正此bug
以上代码可简写:
针对使用频繁的onmouseover,onmouseout,jQuery使用了合成事件的方法:
hover(enter,leave)方法//模拟光标悬停事件,光标移动到
元素上触发enter函数,移出元素时触发leave函数。
toggle(fc1,fc2,fc3,fc4,…)//该
函数实现模拟鼠标连续单击事件,依次触发fn1,fn2,fn3,fn4……。(一般应用不多)
事件冒泡与事件捕获
事件冒泡:一种很形象的说法;事件会按照DOM的层次结构像水泡一样不断向上直到顶端。
事件捕获:与事件冒泡相反,从最顶端往下触发。
事件解除绑定
删除元素的注册事件,ie中的detachEvent,ff中的removeEventListener中。
模拟操作
trigger(event)//触发事件
trigger可为元素一次性绑定多个事件。
jQuery绑定事件方法:
bind(type[,data],fn)//type:
事件类型;data:作为event.data传递给对象的参数;fn:绑定的处理函数
示例,在《锋利的jQuery》一书中讲到了这个例子:
$(function(){ $("#panel h5.head").bind("click",function(){ if($(this).next("div.content").is(":visiable")){ $(this).next("div.content").hide(); }else{ $(this).next("div.content").show(); } }); });
该例子是用来实现点击上面文字隐藏或显示下面文字,经过测试发现只能显示无法隐藏。可能是上面的$(this)函数默认为匿名函数指向的是$(this).next("div.content")了。因此经过改进后的函数修正此bug
$(function(){ $("#panel h5.head").bind("click",function(){ var $content = $(this).next("div.content"); if($content.is(":visible")){ $content.hide(); }else{ $content.show(); } }) });
以上代码可简写:
$("#panel h5.head").click(function(){ var $content=$(this).next("div.content"); if($content.is(":visible")){ $content.hide(); }else{ $content.show(); } }
针对使用频繁的onmouseover,onmouseout,jQuery使用了合成事件的方法:
hover(enter,leave)方法//模拟光标悬停事件,光标移动到
元素上触发enter函数,移出元素时触发leave函数。
<script type="text/javascript"> $(function(){ $("#source").hover(function(){ $("#pointer").text("移入光标");},function(){ $("#pointer").text("移出光标");}); }) </script> <div id="source"></div> <div id="pointer"></div>
toggle(fc1,fc2,fc3,fc4,…)//该
函数实现模拟鼠标连续单击事件,依次触发fn1,fn2,fn3,fn4……。(一般应用不多)
事件冒泡与事件捕获
事件冒泡:一种很形象的说法;事件会按照DOM的层次结构像水泡一样不断向上直到顶端。
事件捕获:与事件冒泡相反,从最顶端往下触发。
事件解除绑定
删除元素的注册事件,ie中的detachEvent,ff中的removeEventListener中。
$("#btn").click(function(){ alert("点击"); $(this).unbind(); });
模拟操作
trigger(event)//触发事件
trigger可为元素一次性绑定多个事件。
$("#btn").bind("mouseover mouseout",function(){ $(this).toggleClass("over"); });
相关文章推荐
- jQuery学习教程三:jQuery 事件
- 【jQuery】jQuery官方基本教程的学习笔记2-事件Events
- jQuery事件与事件对象入门学习教程
- jQuery学习教程(八):事件
- 事件执行JQuery学习(5)事件(2)-java教程
- jQuery事件机制学习教程
- jQuery 学习笔记(三)——事件与应用
- jQuery学习教程一: jQuery语法实例
- jQuery学习教程(四):使用jQuery操作DOM
- jQuery监听键盘事件及相关操作使用教程
- jQuery学习之---事件
- 深入学习jQuery鼠标事件
- jQuery学习教程七: jQuery 效果 - 动画 animate
- jQuery学习--jQuery页面加载完成事件
- 伊伦 学习JQuery的$.Ready()与OnLoad事件比较
- JQuery学习笔记之鼠标的各种事件
- jQuery 学习--事件
- jQuery学习4 浏览器的事件模型
- jquery学习笔记-----事件和动画
- Jquery学习笔记:事件处理基础介绍