本文主要介绍了jQuery中的9种事件操作，包括页面载入、鼠标、键盘、表单、滚动等事件，还提及绑定、解绑、合成、一次事件等操作，如用on()绑定、off()解绑事件，hover()定义合成事件，one()绑定只触发一次的处理函数，此外还介绍了.change()事件及其他事件。
在jQuery中，我们需要学习9种事件操作：
（1）页面载入事件；
（2）鼠标事件；
（3）键盘事件；
（4）表单事件；
（5）滚动事件；
（6）绑定事件；
（7）解绑事件；
（8）合成事件；
（9）一次事件；
（10）.change()事件
（一）页面载入事件
javascript：window.onload
jquery：$(document).ready()
区分：
window.onload：在页面所有DOM元素（包括图片等外部文件）加载完成之后才执行，此时我们才可以操作DOM。即，如果你想动态操作页面，必须得等所有的全部都加载完毕后才能够操作DOM
$(document).ready()：在页面所有DOM元素（不包括图片等外部文件）加载完成就可以执行，此时我们就可以操作DOM。较之window.onload提高了非常大的效率
/******************************/
jQuery中页面载入函数的四种写法：
写法一、
$(document).ready(functin(){
//代码部分
})
写法二、
jQuery(document).ready(function(){
//代码部分
})
//在jQuery中，$就是指jQuery。因此我们可以使用$来代替jQuery，两者是等价的。
写法三、（最最重要，超级常用）
$(function(){
//代码部分
})
写法四、
jQuery(function(){
//代码部分
})
每一个页面，只能有一个页面载入函数。相当于C语言里面的main()函数
（二）鼠标事件
click 鼠标单击事件
dbclick 双击事件
mouseover 移入事件
mouseout 移出事件
mousemove 移动事件
mousedown 按下事件
mouseup 松开事件
/********************************/
单击事件
{
$("#id").click(function () {
//代码
});
*注意*任何元素我们都可以为它添加单击事件！
}
鼠标移入和移出事件（一）
{
$().mouseover(function(){
//代码
})//鼠标移入事件
$().mouseout(function(){
//代码
})//鼠标移出事件
//使用鼠标移入和移出事件可以模仿CSS中hover
}
鼠标移入和移出事件（二）
{
$(".class").mouseenter(function () {
//代码
});//鼠标移入事件
$(".class").mouseleave(function () {
//代码
});//鼠标移出事件
}
//区分两个鼠标移入和移出事件
{
mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发；
//并且移入所选元素算一次事件，移入其子元素又算一次事件。事件会都会触发，如果从最外面移入最内部，那么所选元素有多少子元素，就会触发多少次事件
mouseenter()事件只有鼠标移入“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。
//只有移入所选元素所包括（笼罩）范围内才算一次事件，在元素内部无论怎么移入子元素都不算一次事件
mouseout()与mouseleave()同理；
}
鼠标按下和松开事件
{
$("#id").mousedown(function () {
//代码
});//鼠标按下事件
$("#id").mouseup(function () {
//代码
});//鼠标松开事件
}
//jQuery链式调用
在jQuery中，如果“同一个”jQuery对象有N个操作，我们就可以使用像“链式操作”的方式。
例如：鼠标移入移出事件
$().mouseover().mouseout()
//这样可以顺序写下去，并且是无顺序要求的，即：要执行mouseout()事件，但是没有执行mouseover()事件，执行mouseout()事件并不受影响
//当事件的操作对象是一个的时候，或者说对于一个对象有多种操作的时候，可以采用链式调用的方法
//实现二级菜单，当鼠标移入时显示菜单，移出时菜单消失
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
ul
{
padding:8px;
list-style-type: none;
display:none;
}
li{
text-align: center;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#wrapper").hover(function () {
$("ul").slideToggle();
},function(){
$("ul").slideToggle();
})
})
</script>
</head>
<body>
<div id="wrapper">
<h3>河北工业大学</h3>
<ul>
<li>链接一</li>
<li>链接二</li>
<li>链接三</li>
</ul>
</div>
</body>
</html>
（三）键盘事件
在jQuery中，常用的键盘事件有3种：
（1）keydown事件；
（2）keypress事件；
（3）keyup事件；
//对于这3个事件，有一定的先后顺序：keydown→keypress→keyup。
（1）keydown()
{
//键盘的按键被按下时触发
$("#input").keydown(function () {
//代码
})
//例：
$(window).keydown(function (event) {
//代码
});
涉及到键盘输入的标签或者window都可以用keydown(),来捕获事件
//其中input标签最常用，上面的例子
}
（2）keypress()
{
keypress事件是在键盘上的某个键被按下到松开“整个过程”中触发的事件。
$(window).keypress(function (event) {
//代码
});
涉及到键盘输入的标签或者window都可以用keydown(),来捕获事件
//其中input标签最常用
}
（3）keyup()
{
keyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件。
$("#txt").keyup(function () {
var str = $(this).val().toString();
$("#num").text(str.length);
})
//实时获得输入的长度
涉及到键盘输入的标签或者window都可以用keyup(),来捕获事件
//其中input标签最常用
}
区分：keydown()与keypress()与keyup()
（1）keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；
（2）按下“字符键”会同时触发keydown和keypress这2个事件，但是这2个事件有一定顺序：keydown>keypress；
（3）keyup事件是在按键抬起一瞬间触发的事件，无论之前是按下“字符键”还是“功能键”都会触发；
//综上：
keydown 按下键事件（包括数字键、功能键）
keypress 按下键事件（只包含数字键）
keyup 放开键事件（包括数字键、功能键）
（四）表单事件
常用的表单事件有4种：
（1）focus()事件；
（2）blur()事件；
（3）change()事件；
（4）select()事件；
/*************************************/
（1）focus()和blur()
{
focus()和blur()往往是配合使用的
focus()表示获取焦点触发的事件
blur()表示失去焦点触发的事件
//注意：
具有获得焦点和失去焦点事件的元素有3个（一定要记住啊）：
（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；
//对于下拉列表来说，绑定的是select，而不是option
}
（2）change()
{
当用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。此外，在下拉列表select中一个选项的状态改变后也会触发onchange事件。
具有获得onchange事件的元素有3个：
（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；
//
$("#txt").change(function () {
//这里的$(this)指的是$("#txt")
var len = $(this).val().length;
$("#num").text(len);
})
//这里的change()事件，并不是实时的，即：只有当文本框失去焦点后，才会发现内容发生了改变
//change事件对于下拉列表来说，绑定的是select而不是option
}
(3)select()
{
//当用户选中单行文本框text或多行文本框textarea的文本时（select()事件对于select标签不适用），会触发select事件。select事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。
$("#txt1").select(function () {
alert("你选中了单行文本框中的内容");
});
}
// placeholder的jQuery形式：
$(function () {
//获取文本框默认值
//此时的input标签属性里面是没有设置placeholder的，用的是input的默认值，即：生硬的在html中设置value
var txt = $("#search").val();
//focus()获取焦点事件
$("#search").focus(function () {
if ($(this).val() == txt) {
$(this).val("");
}
});
//blur()失去焦点事件
$("#search").blur(function () {
if ($(this).val() == "") {
$(this).val(txt);
}
});
})
//与placeholder进行区分：
上面的方法是在文本框获取焦点的时候内容就清空了，
而placeholder是只要你不输入内容，placeholder的内容始终是存在的
（五）滚动事件
滚动事件，指的是当滚动条位置发生改变时触发的事件。不妨理解为，在某一个元素上的滚动条发生滚动就会触发滚动事件
//详情请参照：“jQuery函数操作汇总~元素（标签）角度”中scrollTop()与scrollLeft()函数部分
$().scroll(function(){
//代码
})
//例：滚动事件与scrollTop()和scrollLeft()的结合使用
$("#id").scroll(function () {
if ($(this).scrollTop() > index) {
//代码
}
});
或
$(window).scroll(function(){
//代码
});
（六）绑定事件
在文档加载完成后，如果我们想要为元素绑定某个事件来完成某些操作，可以使用on()方法来实现。在jQuery中，我们可以使用on()方法为某些元素绑定一个事件或者多个事件。
$().on(type , function(){
//代码
})
//type必选参数，type是一个字符串
//fn为必选参数，表示事件的处理函数。
两种用法：
1>为已经存在的标签绑定事件
{
$("#btn").on("click", function () {
alert("优快云");
})
以上方法等价于
$("#btn").click(function(){
//代码
})
}
2>为“未来即将创建”的元素绑定事件
{
所谓的“未来创建的元素”指的是使用jQuery创建的元素。
即：应用jQuery节点函数操作加入的节点
//例：
var $btn = $('<input id="btn" type="button" value="按钮"/>');
$($btn).appendTo("body");
$("#btn").on("click", function () {
//代码
});
以上例子等价于：
var $btn = $('<input id="btn" type="button" value="按钮"/>');
$($btn).appendTo("body");
$("#btn").click(function () {
//代码
});
//即on()方法中的click等价于click()方法
}
//对于使用on()方法绑定多个事件，或者绑定多个选择器，请参考以下链接
–>点这里<–
//从jQuery1.7开始（我们现在用的是jQuery1.12.0），对于绑定事件，jQuery官方都建议使用on()方法来统一取代以前的bind()、live()和delegate()；对于解绑事件，jQuery官方也建议使用off()方法来统一取代以前的unbind()、die()和undelegate()。
（七）解绑事件
通过off()方法解除绑定的某一指定的事件或者所有事件。
$().off(type)
//type为必选参数，表示事件类型，是一个字符串
//例：
$("#btn").off("click");
//off()方法不仅可以解绑“使用绑定事件所添加的事件”，还可以解绑“使用基本事件所添加的事件”。
//对于使用off()方法绑定多个事件，或者绑定多个选择器，请参考以下链接
–>点这里<–
（八）合成事件
使用hover()方法一次性地定义鼠标移入和移出两个个事件，这就是所谓的合成事件。
$().hover(fn1,fn2)
//fn为function的缩写
//参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。
//例：
$("h3").hover(function () {
$("#content").css("display","block");
}, function () {
$("#content").css("display", "none");
});
//hover()方法，准确来说是替代jQuery中的mouseenter()和mouseleave()，而不是替代mouseover()和mouseout()。
（九）一次事件one()
使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
$().one(type , fn)
//type表示事件类型，是一个字符串
//例：
$("#btn").one("click", function () {
alert("只能弹出一次！");
});
//使用one()方法绑定的事件，只能触发一次，以后事件失效
（十）.change()事件
实例：
当输入域发生变化时改变其颜色：
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
定义和用法
当元素的值（value）发生改变时，会发生 change 事件。
当元素的值改变时发生 change 事件（仅适用于表单字段–input textarea select）。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
（十一）其他事件
load()、unload()、trigger()、error()等
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
