五、jQuery事件处理
jQuery事件处理
- jQuery事件处理
-
- 1.指定事件处理函数
- 2.绑定事件处理方法
-
- （1）bind()方法
- （2）delegate()方法
- 3.jQuery事件的方法
-
- 往期回顾
jQuery事件处理
jQuery可以很方便地使用事件对象对触发事件进行处理。jQuery支持的事件包括键盘事件、鼠标事件、表单事件、文档加载事件和浏览器事件等。
1.指定事件处理函数
事件处理函数指事件触发时调用的函数。可以通过下面的方法指定事件处理函数：
$("选择器").事件名(function(形参){
//函数体
})
例如，前面多次使用
$(document).ready(function(e){
});
指定文档对象的ready事件处理函数，ready事件表示当文档对象就绪的时候被触发。
2.绑定事件处理方法
（1）bind()方法
使用bind(方法可以为每一个匹配元素的特定事件(如单击事件)绑定一个事件处理函数，事件处理函数会接收到一个事件对象。
bind()方法的语法格式如下所示：
bind(type, [data,] function)
其中，type表示事件类型；data是可选参数，作为event.data属性值传递给事件对象的额外数据对象；function表示绑定到指定事件的事件处理函数。如果function函数返回false，则会取消事件的默认行为并阻止冒泡。
例1是通过bind()方法为一个按钮绑定一个单击事件，单击按钮后，网页中的一段文字将自动消失，如果再次单击这个按钮，消失的文字又会显示出来。本例重点理解事件的绑定过程。
【例1】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bind方法</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript ">
$(document).ready(function(){
$("button").bind("click", function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一段文字</p>
<button>请点击这里</button>
</body>
</html>
例2中通过bind()方法指定 contextmenu(鼠标右击)事件的处理函数，在该函数中返回false，从而取消事件的默认行为。
【例2】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bind方法</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript ">
$(document).ready(function(){
$(document).bind("contextmenu", function(){
return(false);
});
});
</script>
</head>
<body>
<p>您右击网页，将不会弹出右键快捷菜单！</p>
</body>
</html>
（2）delegate()方法
delegate()方法是对指定元素的特定子元素增加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用delegate()方法的事件处理程序适用于当前或以后由脚本创建的新元素。其绑定事件的语法格式如下：
$(选择器).delegate(childSelector,eventType, function)
其中， childSelector 表示指定事件的子元素选择器；eventType指事件的类型；function指事件处理函数。
例3将文档中子元素的click事件绑定到指定的事件处理函数，单击元素时，将在所有元素的最后插入一个元素，并且新添加元素的内容是一个定义好的数组内容。
【例3】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>delegate方法</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript ">
$(document).ready(function(){
listArr=new Array("音乐","排球","羽毛球","篮球","游泳");
index=0;
$("ul").delegate("li","click", function(){
$(this).append("" +listArr[index]+"")
index++;
index%=5;
})
});
</script>
</head>
<body>
<ul>
<li>足球</li>
</ul>
</body>
</html>
3.jQuery事件的方法
jQuery提供了一组事件相关的方法，用于处理各种HTML事件。jQuery常用事件的方法及说明见表1。
| 事件的方法 | 说明 |
|---|---|
$("选择器").click) |
鼠标单击触发事件，参数可选(data，function) |
$("选择器").dblelick() |
双击触发事件，参数可选(data，function) |
$("选择器").mousedown()/mouseup() |
鼠标按下／弹起触发事件 |
$("选择器”).mousemove() |
鼠标移动触发事件 |
$("选择器").mouseover()/mouseout() |
鼠标移入／移出触发事件 |
$("选择器”).mouseenter()/mouseleave () |
鼠标进入／离开触发事件 |
$("选择器").hover(func1，func2) |
鼠标移入调用func1函数，移出调用func2函数 |
$("选择器").focusin() |
鼠标聚焦到该元素时触发事件 |
$("选择器").focusout() |
鼠标失去焦点时触发事件 |
$("选择器").focus()/blur() |
鼠标聚焦／失去焦点触发事件（不支持冒泡） |
$("选择器").change() |
表单元素发生改变时触发事件 |
$("选择器").select() |
文本元素被选中时触发事件 |
$("选择器").submit() |
表单提交动作触发事件 |
$("选择器").keydown()/keyup() |
键盘按键按下／弹起触发事件 |
$("选择器").keypress() |
键盘按下过程中触发事件 |
例4是单击按钮后，在一个DIV块上按住左键不放进行拖动，这个DIV块会跟随鼠标移动，松开左键之后，DIV块会停止跟随。
【例4】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件举例</title>
<style>
#mydiv{ background:#00BFFF;position:absolute;width:100px;height:100px}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){//按钮的单击事件
$("#mydiv").mousedown(function(event){//DIV块的鼠标按下事件
var offset=$("#mydiv").offset();//获取DIV块的位置
x1=event.clientX-offset.left;
y1=event.clientY-offset.top;
$("#mydiv").mousemove(function(event){//鼠标移动事件
//设置DIV块移动后的新位置
$("#mydiv").css("left",(event.clientX-x1)+"px");
$("#mydiv").css("top",(event.clientY-y1)+"px");
});
$("#mydiv").mouseup(function(event){//鼠标左键抬起事件
$("#mydiv").unbind("mousemove");//删除鼠标移动事件
});
});
})
})
</script>
</head>
<body>
<button id="btn">鼠标拖动</button>
<div id="mydiv"></div>
</body>
</html>
注：本文通过 CDN（内容分发网络）引用jQuery，用户可以不下载存放 jQuery。
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
往期回顾
一、jQuery概述
二、jQuery选择器（一）
三、jQuery选择器（二）
四、jQuery中的DOM操作