jquert事件机制文档格式.docx
《jquert事件机制文档格式.docx》由会员分享，可在线阅读，更多相关《jquert事件机制文档格式.docx（12页珍藏版）》请在冰豆网上搜索。
在JavaScript的事件模型中，事件与处理程序的绑定一般有两种方式：
第一种是在事件源对象所对应的html标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码；
第二种是直接在JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。
•jQuery常用事件
方法
描述
执行时机
mouseover（）
触发或将函数绑定到指定元素的mouseover事件
鼠标移动时
mouseout（）
触发或将函数绑定到指定元素的mouseoout事件
鼠标移出时
keydown（）
触发或将函数绑定到指定元素的keydown事件
按下键盘时
keyup（）
触发或将函数绑定到指定元素的keyup事件
释放按键时
keypress（）
触发或将函数绑定到指定元素的keypress事件
产生可打印的字符时
focus（）
触发或将函数绑定到指定元素的focus事件
获得焦点
blur（）
触发或将函数绑定到指定元素的blur事件
失去焦点
要求鼠标移动到菜单上时，该菜单高亮显示，鼠标移出时，菜单恢复原样。
同时能实现关闭窗口的快捷方式，即单击“ESC”键关闭窗口。
<
styletype="
text/css"
>
.current{
background-color:
#666;
}
/style>
......
$（function（）{
$（"
#headli"
）.mouseover（function（）{//当鼠标移入#headli元素时
$（this）.addClass（"
current"
）;
//为鼠标所在li元素添加current类样式
}）;
）.mouseout（function（）{//当鼠标移出#headli元素时
$（this）.removeClass（"
//移除鼠标所在li元素的current类样式
$（document）.keypress（function（）{
if（event.keyCode==27）{
window.close（）;
}
}）
divid="
head"
<
ul>
li>
ahref="
index.html"
首页<
/li>
#"
美食<
/a>
旅游<
酒店<
电影<
KTV<
时尚<
生活服务<
/ul>
/div>
在jQuery中，还可以使用bind（）方法进行事件的绑定，bind（）功能是为每个选择元素的事件绑定处理函数，其语法格式如下：
jQuery对象.bind（type,fn（））;
其中，参数type表示事件的类型，参数fn（）表示事件触发时需要执行的处理函数。
内置的事件类型包括click、mouseover、mouseout、focus、blur、keyup、keydown、change和scroll等。
使用bind（）方法修改前面的“菜单”。
<
script>
<
scripttype="
text/javascript"
>
$（function（）{
$（"
）.bind（"
mouseover"
function（）{//当鼠标移过#headli元素时
$（this）.addClass（"
}）;
mouseout"
function（）{//当鼠标移出#headli元素时
$（this）.removeClass（"
$（document）.bind（"
keypress"
function（）{
if（event.keyCode==27）{
window.close（）;
}
}）
/script>
4切换事件
（1）hover（）方法
调用jQuery中的hover（）方法可以使元素在鼠标移入与鼠标移出的事件中进行切换，其语法格式如下
jQuery对象.hover（over,out）;
参数over为鼠标移入元素时触发的函数，参数out为鼠标移出元素时触发的函数。
用hover（）方法修改前例
$（function（）{
$（"
）.hover（function（）{//当鼠标移入#headli元素时
},
function（）{//当鼠标移出#headli元素时
//移除鼠标所在li元素的current类样式）;
}）;
（2）toggle（）方法
在toggle（）方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数进行调用，像mp3中的循环播放。
其语法格式如下：
jQuery对象.toggle（
function（）{},//第一次单击时触发
function（）{},//第二次单击时触发
function（）{},//第三次单击时触发
…..
在页面上插入一幅图片，第一次单击时，切换至第二幅图片，第二次单击时，切换至第三幅图片，第三次单击时，恢复到第一幅图片，依次循环显示图片。
$（function（）{
$（"
img"
）.toggle（
function（）{
$（this）.attr（{"
src"
:
"
images/fj2.jpg"
"
title"
马来西亚"
}）},
function（）{
images/fj3.jpg"
迪拜"
},
function（）{
$（this）.attr（{"
images/fj1.jpg"
美国"
}）}
）;
body>
imgsrc="
title="
/>
/body>
5其他事件
（1）方法one（）
one（）方法的功能是为所选择的元素绑定一个仅触发一次的处理函数，其调用的语法格式如下
jQuery对象.one（type,fn）;
其中参数type为事件类型，即需要触发事件的类型；
fn为事件触发时所需要执行的函数
在页面添加一个按钮，初始值为“查看编号”，当单击该按钮时，通过jQuery中的one（）方法，将隐藏域所保存的编号显示在该按钮上，再次单击时则不响应。
!
DOCTYPEhtml>
html>
head>
metacharset="
UTF-8"
title>
/title>
input[type='
button'
]"
）.one（"
click"
varid=$（"
hidden'
）.val（）;
//alert（"
测试"
//消息框仅在第一次单击是显示
$（this）.val（"
编号是：
+id）;
/head>
inputtype="
hidden"
value="
012"
/>
button"
查看编号"
/html>
（2）方法trigger（）
在前端页面开发中，通常希望页面加载完毕后能够自动执行一些人性化的操作，如文本框的内容处于全部被选中状态、某个按钮处于焦点中等。
但是利用传统的JavaScript语言，需要编写极其复杂的代码才可以实现上述功能，而在jQuery中，仅需要调用一个trigger（）方法就可以轻松实现。
其调用的语法格式如下：
jQuery对象.trigger（type）;
其中参数type为触发事件的类型。
trigger（）方法的功能是在所选择的元素上触发指定类型的事件。
在页面添加一个文本框，并给文本框设置一个默认值，当该页面加载完毕后，文本框处于被选中状态。
#txtName"
）.trigger（"
select"
用户名：
text"
id="
txtName"
张三"
在页面上添加一个<
div>
标签，并在该<
中嵌套一个按钮。
同时将body、div和button这三个元素click事件绑定同样的处理函数，当单击按钮时，显示单击事件触发的次数。
varcount=0;
body,div#content,input[type='
）.click（function（）{
count++;
div#result"
）.text（"
单击事件触发了"
+count+"
次"
}）;
content"
单击"
应避免事件冒泡现象的发生，即单击按钮就执行单击事件，并不触发其他父元素的单击事件。
在jQuery中，可以通过returnfalse实现停止事件的冒泡过程，修改如下：
//$（"
//记录单击的次数
//次数累加
returnfalse;
//停止事件的冒泡过程
文本框获取焦点focus和丢失焦点blur事件的应用，需求如下所述：
1．在页面添加一个用于输入邮箱地址的文本框，页面加载完毕后，默认让文本框获取焦点。
并且当文本框获取焦点时实现边框高亮、背景突出显示的效果。
如下图所示：
（1）在文档加载完毕后，使用trigger（）方法自动触发文本框的focus事件且给文本框的focus事件绑定函数，在函数体中使用jQuery操作DOM元素样式的方法，制作文本框高亮、背景突出的效果。
（2）创建函数checkEmail（），使用正则表达式对象验证邮箱地址的格式，如果格式正确返回true，否则返回false。
（3）在文档加载完毕后，给文本框的blur事件绑定函数。
在函数体中使用jQuery操作DOM元素样式的方法，制作文本框丢失焦点后的样式效果，并做格式验证。
在用户输入了邮箱地址的前提下，调用checkEmail（）函数实现验证，根据checkEmail（）函数的返回值，确定提示的信息。
如果用户没有输入，则提示“邮箱地址必填”。
functioncheckEmail（emailInfo）{
//用正则表达式对象验证email的格式
varemailReg=/^\w+@\w+（\.[a-zA-Z]{2,3}）{1,2}$/;
returnemailReg.test（emailInfo）;
}
formid="
frmReg"
action="
pid="
email"
class="
pInit"
邮箱：
txtEmail"
txtInit"
spanclass="
spanInit"
emailSpan"
邮箱名@域名<
/span>
/p>
/form>
//自动触发邮箱文本框的focus事件
$（"
#txtEmail"
focus"
）.focus（function（）{//文本框获取焦点时执行的函数
$（this）.removeClass（"
）
.addClass（"
txtFocus"
//修改当前文本框的样式
$（this）.parent（"
p"
）.addClass（"
pFocus"
//获取父元素p标签，设置段落的样式
}）;
）.blur（function（）{//文本框丢失焦点事件时执行的函数
$（this）.removeClass（"
txtFocus“）.addClass（"
txtInit"
$（this）.parent（"
）.removeClass（"
//修改失去焦点的样式
varemailInfo=$（"
//获取用户输入的email
if（emailInfo.length==0）{
$（"
#emailSpan"
邮箱地址必填"
}else{
if（checkEmail（emailInfo））{//email输入正确
$（"
spanBlurOk"
.text（"
}else{
错误，如hj@"
}
}
}）;
jQuery中的页面载入事件ready（）方法有四种写法，其中最简单的写法是$（function（）{}）。
jQuery提供了一种统一的事件模型。
在jQuery中，还可以使用bind（）方法进行事件的绑定，bind（）功能是为每个选择元素的事件绑定处理函数。
调用jQuery中的hover（）方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换，该方法在实现运用中，也可以通过jQuery中的事件mouseover与事件mouseout进行替换。
调用jQuery中的toggle（）方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数进行调用。
one（）方法功能是为所选的元素绑定一个仅触发一次的处理函数，trigger（）方法的功能是在所选择的元素上触发指定类型的事件。
在jQuery中，可以通过returnfalse实现停止事件的冒泡过程。
升级会员 