jQuery - 概述

jQuery - 事件处理

我们可以使用事件创建动态网页.事件是您的Web应用程序可以检测到的操作.

以下是示例事件 :

鼠标单击
网页加载
将鼠标悬停在元素上
提交HTML表单
键盘上的击键等.

触发这些事件后，您可以使用一个自定义函数，可以随意执行任何事情.这些自定义函数调用事件处理程序.

绑定事件处理程序

使用jQuery Event Model，我们可以使用bind（）方法在DOM元素上建立事件处理程序，如下所示:

在线演示

 < html> 
< head> 
< title> jQuery示例</title> 
< script type ="text/javascript"
 src ="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script> 
< script type ="text/javascript"language ="javascript"> 
 $(document).ready(function(){
 $('div').bind('click'，function(event){
 alert('Hi there！'); 
}); 
}); 
</script> 
< style> 
 .div {margin:10px; padding:12px; border:2px solid＃666;宽度:60px;} 
</style> 
</head> 
< body> 
< p>点击下面的任意方块查看结果:</p> 
< div class ="div"style ="background-color:blue;"> ONE</div> 
< div class ="div"style ="background-color:green;"> TWO</div> 
< div class ="div"style ="background-color:red;"> THREE</div> 
</body> 
</html>

此代码将导致division元素响应click事件; 当用户此后在此部门内点击时，将显示警报。

这将产生以下结果:

bind() 命令的完整语法如下

selector.bind( eventType[, eventData], handler)

以下是参数的说明:

eventType : 包含JavaScript事件类型的字符串，例如单击或提交。有关事件类型的完整列表，请参阅下一节。
eventData : 这是可选参数，是将传递给事件处理程序的数据映射。
handler : 每次触发事件时执行的函数。

Removing Event Handlers

通常，一旦建立了事件处理程序，它将在页面的剩余生命周期内保持有效。您可能需要删除事件处理程序。

jQuery提供了unbind()命令来删除现有的事件处理程序。 unbind()的语法如下 :

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是参数的说明:

eventType : 包含JavaScript事件类型的字符串，例如单击或提交。有关事件类型的完整列表，请参阅下一节。
handler : 如果提供，则标识要删除的特定侦听器。

事件类型

Sr.No.	Event Type & Description
1	blur 元素失去焦点时发生。
2	change 元素更改时发生。
3	click 单击鼠标时发生。
4	dblclick 鼠标双击时发生。
5	error 在加载或卸载等错误时发生。
6	focus 在元素获得焦点时发生。
7	keydown 按下键时发生。
8	keypress 按下并释放按键时发生。
9	keyup 释放密钥时发生。
10	load 加载文档时发生。
11	mousedown 按下鼠标按钮时发生。
12	mouseenter 鼠标进入元素区域时发生。
13	mouseleave 鼠标离开元素区域时发生。
14	mousemove 鼠标指针移动时发生。
15	mouseout 鼠标指针移出元素时发生。
16	mouseover 鼠标指针在元素上移动时发生。
17	mouseup 释放鼠标按钮时发生。
18	resize 调整窗口大小时发生。
19	scroll 滚动窗口时发生。
20	select 选择文本时发生。
21	submit 提交表单时发生。
22	unload 卸载文档时发生。

事件对象

回调函数只接受一个参数; 当调用处理程序时，JavaScript事件对象将通过它传递。

事件对象通常是不必要的，并且省略了参数，因为当处理程序被绑定以确切知道触发处理程序时需要执行的操作时，通常可以使用足够的上下文，但是您需要访问某些属性。

事件属性

Sr.No.	Property & Description
1	altKey 如果在触发事件时按下了Alt键，则设置为true，否则设置为false。在大多数Mac键盘上，Alt键标记为Option。
2	ctrlKey 如果在触发事件时按下了Ctrl键，则返回true，否则返回false。
3	data 在建立处理程序时，该值（如果有）作为第二个参数传递给bind()命令。
4	keyCode 对于keyup和keydown事件，这将返回按下的键。
5	metaKey 如果在触发事件时按下了Meta键，则设置为true，否则设置为false。 Meta键是PC上的Ctrl键和Mac上的Command键。
6	pageX 对于鼠标事件，指定事件相对于页面原点的水平坐标。
7	pageY 对于鼠标事件，指定事件相对于页面原点的垂直坐标。
8	relatedTarget 对于某些鼠标事件，标识触发事件时光标离开或输入的元素。
9	screenX 对于鼠标事件，指定事件相对于屏幕原点的水平坐标。
10	screenY 对于鼠标事件，指定事件相对于屏幕原点的垂直坐标。
11	shiftKey 如果在触发事件时按下Shift键，则设置为true，否则设置为false。
12	target 标识触发事件的元素。
13	timeStamp 创建事件时的时间戳（以毫秒为单位）。
14	type 对于所有事件，指定触发的事件类型（例如，单击）。
15	which 对于键盘事件，指定导致事件的键的数字代码，对于鼠标事件，指定按下哪个按钮（左侧为1，中间为2，右侧为3）。

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

事件方法

有一个可以调用的方法列表事件对象 :

Sr.No.	方法&说明
1	preventDefault() 阻止浏览器执行默认操作.
2	isDefaultPrevented() 返回是否曾在此事件对象上调用event.preventDefault().
3	stopPropagation() 阻止事件冒泡到父元素，防止任何父处理程序被通知事件.
4	isPropagationStopped() 返回是否曾在此事件对象上调用event.stopPropagation().
5	stopImmediatePropagation() 停止执行其余的处理程序.
6	isImmediatePropagationStopped() 返回是否曾在此事件对象上调用event.stopImmediatePropagation().

事件处理方法

下表列出了与事件相关的重要方法 :

Sr.No.	方法&说明
1	bind(type，[data]，fn) 将处理程序绑定到每个匹配的一个或多个事件(如click)元件.也可以绑定自定义事件.
2	off(events [，selector] [，handler(eventObject)]) 这与live相反，它会移除绑定的直播事件.
3	hover( over, out ) 模拟悬停例如，打开和关闭一个对象的鼠标.
4	on(events [，selector] [，data]，handler) 将处理程序绑定到所有当前和减号的事件(如单击);和未来和减去;匹配元素.也可以绑定自定义事件.
5	one(type，[data]，fn) 将处理程序绑定到一个或为每个匹配的元素执行一次更多事件.
6	ready(fn) 绑定要执行的函数DOM已准备好被遍历和操纵.
7	trigger( event, [data] ) 触发事件每个匹配的元素.
8	triggerHandler(event，[data]) 触发元素上的所有绑定事件处理程序.
9	unbind( [type], [fn] ) 这与bind相反，它会删除来自每个匹配元素的绑定事件.

事件助手方法

jQuery还提供了一组事件帮助函数，可以用来触发事件来绑定上面提到的任何事件类型.

触发方法

以下示例将触发所有段落上的模糊事件 :

$("p").blur();

绑定方法

以下示例将绑定所有<div>上的click事件 :

$("div").click( function () { 
   // do something here
});

Sr.No.	方法&说明
1	blur() 触发每个匹配元素的模糊事件.
2	blur(fn) Bind每个匹配元素的模糊事件的函数.
3	change() 触发每个匹配元素的更改事件.
4	change(fn) 将函数绑定到每个匹配元素的change事件.
5	click() 触发点击事件每个匹配的元素.
6	click(fn) 将函数绑定到每个匹配元素的click事件.
7	dblclick() 触发每个匹配元素的dblclick事件.
8	dblclick(fn) 将函数绑定到每个匹配元素的dblclick事件.
9	error() 触发每个匹配元素的错误事件.
10	error(fn ) 将函数绑定到每个匹配元素的错误事件.
11	focus() 触发器每个匹配元素的焦点事件.
12	focus(fn) 将函数绑定到每个匹配元素的焦点事件.
13	keydown() 触发keydown事件每个匹配的元素.
14	keydown(fn) 将函数绑定到每个匹配元素的keydown事件.
15	keypress() 触发每个匹配元素的按键事件.
16	keypress(fn) 将函数绑定到每个匹配的按键事件元素.
17	keyup() 触发每个匹配元素的keyup事件.
18	keyup(fn) 将函数绑定到每个匹配元素的keyup事件.
19	load(fn) 将函数绑定到每个匹配元素的load事件.
20	mousedown(fn) 将函数绑定到每个匹配元素的mousedown事件.
21	mouseenter(fn) 将函数绑定到每个匹配元素的mouseenter事件.
22	mouseleave(fn) 将函数绑定到每个匹配元素的mouseleave事件.
23	mousemove(fn) 将函数绑定到每个匹配元素的mousemove事件.
24	mouseout(fn) 将函数绑定到每个匹配的mouseout事件元素.
25	mouseover(fn) 将函数绑定到每个匹配元素的mouseover事件.
26	mouseup(fn ) 将函数绑定到每个匹配元素的mouseup事件.
27	resize(fn) 将函数绑定到每个匹配元素的resize事件.
28	scroll(fn) 将函数绑定到每个匹配元素的scroll事件.
29	select() 触发每个匹配元素的select事件.
30	select(fn) 绑定函数到每个匹配元素的select事件.
31	submit() 触发每个匹配元素的提交事件.
32	submit(fn) 将函数绑定到每个匹配元素的submit事件.
33	unload(fn) 将函数绑定到每个匹配元素的unload事件.