事件（Events）

优质

小牛编辑

138浏览

2023-12-01

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

以下是事件的例子 -

鼠标单击
网页加载
将鼠标移到元素上
提交HTML表单
键盘上的按键等

触发这些事件后，您可以使用自定义函数对事件执行任何操作。这些自定义函数调用事件处理程序。

绑定事件处理程序

使用jQuery事件模型，我们可以使用bind()方法在DOM元素上建立事件处理程序，如下所示 -

<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('Hi there!');
            });
         });
      </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>

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

bind（）命令的完整语法如下 -

<i>selector</i>.bind( eventType[, eventData], handler)

以下是参数的说明 -

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

删除事件处理程序

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

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

<i>selector</i>.unbind(eventType, handler)
or 
<i>selector</i>.unbind(eventType)

以下是参数的说明 -

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

事件类型

以下是可以使用JQuery绑定的跨平台和推荐事件类型 -

Sr.No.	事件类型和描述
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.	财产和描述
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）将处理程序绑定到每个匹配元素的一个或多个事件（如单击）。也可以绑定自定义事件。
2	off（events [，selector] [，handler（eventObject）]）这与live相反，它删除了绑定的直播事件。
3	hover( over, out ) 模拟悬停，例如在对象上移动鼠标和关闭对象。
4	on（events [，selector] [，data]，handler）将处理程序绑定到所有当前和未来匹配元素的事件（如单击）。也可以绑定自定义事件。
5	一个（类型，[数据]，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
});

以下是jQuery提供的所有支持方法的完整列表 -

Sr.No.	方法和描述
1	blur( ) 触发每个匹配元素的模糊事件。
2	blur( fn ) 将函数绑定到每个匹配元素的blur事件。
3	change( ) 触发每个匹配元素的change事件。
4	change( fn ) 将函数绑定到每个匹配元素的change事件。
5	click( ) 触发每个匹配元素的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( ) 触发每个匹配元素的submit事件。
32	submit( fn ) 将函数绑定到每个匹配元素的submit事件。
33	unload( fn ) 将函数绑定到每个匹配元素的unload事件。