文档介绍：第四章
jQuery中的事件和动画
回顾
节点操作
属性操作
样式操作
设置元素内容
处理表单元素值
目标
事件的绑定和移除
事件对象和事件冒泡
合成事件
动画操作基础
常用动画效果
自定义动画
jQuery中的事件模型
提供建立事件处理程序的统一方法;
允许在每个元素上为每个事件类型建立多个处理程序;
采用标准的事件类型名称,例如click或mouseover;
使Event实例可用作处理程序的参数;
对Event实例的最常用的属性进行规范化;
为取消事件和阻塞默认操作提供统一方法。
绑定事件处理程序
bind(type [,data] , fn)
第1个参数是事件类型
第2个参数为可选参数,
第3个参数则是用来绑定的处理函数。
one(type [,data] , fn)
事件处理程序执行第一次后,事件绑定就自动删除。
bind()方法示例
页面JavaScript代码片段
<script type="text/javascript">
$(function(){
$("input").bind("click",function(){
alert("Hello jQuery!");
});
});
</script>
<input type="button" value="submit"/>
上述代码在页面加载完成后,为按钮通过bind()方法绑定了一个click点击事件,在用户点击按钮时则显示Hello jQuery!
简写绑定事件
像click、mouseover和mouseout这类事件,在程序中经常会使用到,jQuery为此也提供了一套简写的方法。简写方法和bind()方法的使用类似,实现的效果也相同,唯一的区别是能够减少代码量。
<script type="text/javascript">
$(function(){
$("input").click(function(){
alert("Hello jQuery!");
});
});
</script>
<input type="button" value="submit"/>
上面这种写法简洁明了,是事件绑定中常用的写法。
删除事件处理程序
unbind(eventType, functionName)
删除包装集中所有元素指定事件中指定的事件处理程序
unbind(eventType)
表示与此事件类型绑定的所有事件处理程序都将被删除
unbind()
表示将该元素中的所有事件的所有事件处理程序都删除
unbind()方法示例
页面JavaScript代码片段
<script type="text/javascript">
$(function(){
$("#btn").click(myFunc1 = function(){ $("#msg").html($("#msg").html() + "click1<br/>"); }).click(myFunc2 = function(){
$("#msg").html($("#msg").html() + "click2<br/>"); });
//删除指定的事件处理程序
$("#btn").unbind("click",myFunc1);
});
</script>
<div id="msg"></div><input id="btn" type="button" value="submit"/>
事件对象
当利用bind()方法建立的事件处理程序被调用时,Event实例作为第一个参数被传递给函数。jQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。