第8章jQuery中的事件
回顾
?在jQuery中使用什么方法获取和设置属性？
?$(“div”).append(“aDOM操作/a”)表示什
么含义？
?$(“ulli:first”).detach()与$(“ul
li:first”).empty()有何区别？
本章任务
?任务1微博字数统计
?任务2制作图片提示效果
?任务3改变图片透明度
学习目标
1.学会绑定事件
2.会使用简写事件
3.会使用复合事件
4.掌握事件对象
5.了解冒泡和默认行为
任务1微博字数统计
?任务描述：
–在页面中，允许用户在文本域输入100个字符，当用户
每输入一个字符，提示文字则显示还可以输入多少个
字符，如图所示，当用户输入的字符长度超过100时，
提示用户输入的字符超长了，并使文本域不可用。
任务1微博字数统计
?任务分析：
–1.完成静态页面设计，标识文本域和提示部分。
–2.加载DOM后添加处理函数。
–3.按键弹起事件触发时，统计文本域中字符长度。
–4.在提示字符数处显示还可以输入（100-文本域长度
）个字符，此处添加判断，若用户输入长度大于100时
，提示用户输入的字符超长了，并通过attr方法设置
文本域为只读。
jQuery中的事件--加载DOM
?在页面加载完毕后,浏览器会通过JavaScript为DOM元
素添加事件。在常规的JavaScript代码中,通常使用
window.onload方法,在jQuery中使用
$(document).ready()方法.
事件绑定
事件绑定的语法：
$(selector).bind(type,[data],function)
?type为事件类型
包括：
blur、focus、load、resize、scroll、unload、click、dblclick、
mousedown、mouseup、mousemove、mouseover、mouseout、
mouseenter、mouseleave、change、select、submit、keydown、
keypress、keyup、error等。
?data为方法传递的参数,可以忽略.
?function是用来绑定的处理函数.
例如：为id为hot的div的元素绑定单击事件。
$(“#hot”).bind(“click”,function()
{
alert(“层被点击”);
}
事件移除
有时候事件执行完了，想取消事件的效果可以通过一定的办
法来处理。
事件移除的语法：
$(selector).unbind(type,[data],function)
例如：移除id为mydiv对象上的mouseout事件
$(“#mydiv”).unbind(“mouseout”);
简写事件
为了使开发者更加方便的绑定事件，jQuery封装了常用的
事件以便节约更多的代码。称它为简写事件。
?.mouseover()和.mouseout()表示鼠标移入和移出
的时候触发。那么jQuery还封装了另外一
组：.mouseenter()和.mouseleave()表示鼠标穿过
和穿出的时候触发。那么这两组本质上有什么区别
呢？
?.mouseenter()和.mouseleave()这组穿过子元素不
会触发，而.mouseover()和.mouseout()则会触发。
示例
?当鼠标滑过“标题”时，参考书信息显示，如图1所示。
当鼠标滑出“标题”时，参考书信息隐藏，如图2所示。
$(document).ready(function(e){
$(h2).mouseover(function(){