关注我们

jQuery - Events操作

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

绑定事件

使用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>

此代码将使除法元素响应click事件；此后，当用户在该部门内单击时，将显示Alert。

运行上面代码输出

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

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

以下是参数的描述-

eventType - 包含JavaScript事件类型的字符串，如单击或提交。
eventData - 这是可选参数，它是将传递给事件处理程序的数据映射。
handler - 每次事件触发时执行的函数。

删除事件

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

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

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是参数的描述-

eventType - 包含JavaScript事件类型的字符串，如单击或提交。
handler - 如果提供，则标识要删除的特定侦听器。

事件类型

Sr.No.	Event Type & Remark
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 卸载文档时发生。

Sr.No.	Property & Remark
1	altKey 如果在触发事件时按下Alt键，则设置为true；否则，则设置为false。在大多数Mac键盘上，Alt键标签为Option。
2	ctrlKey 如果在触发事件时按下Ctrl键，则设置为true；否则，则设置为false。
3	data 创建处理程序时，该值(如果有)作为第二个参数传递给bind()()命令。
4	keyCode 对于按键事件和按键事件，这将返回按下的键。
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 对于所有事件，指定触发的事件的类型(如:click)。
15	which 对于键盘事件，请指定导致事件的键的数字代码，对于鼠标事件，请指定按下的按钮(左为1，中为2，右为3)。

运行上面代码输出

事件方法

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

Sr.No.	Method & Remark
1	preventDefault() 阻止浏览器执行默认操作。
2	isDefaultPrevented() 返回是否曾经在此事件对象上调用过event.preventDefault()。
3	stopPropagation() 停止将事件冒泡到父元素，从而防止任何父处理程序收到该事件的通知。
4	isPropagationStopped() 返回是否曾经在此事件对象上调用过event.stopPropagation()。链接：https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-events.html 来源：LearnFk无涯教程网
5	stopImmediatePropagation() 停止执行其他处理程序。
6	isImmediatePropagationStopped() 返回是否曾经在此事件对象上调用event.stopImmediatePropagation()。

事件处理方法

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

Sr.No.	Method & Remark
1	bind( type, [data], fn ) 为每个匹配的元素将处理程序绑定到一个或多个事件(如click)。也可以绑定自定义事件。
2	off( events [, selector ] [, handler(eventObject) ] ) 这与实时相反，它删除了绑定的实时事件。
3	hover( over, out ) 模拟悬停，如在对象上上下移动鼠标。
4	on( events [, selector ] [, data ], handler ) 将所有当前-和将来-匹配元素的处理程序绑定到事件(如click)。也可以绑定自定义事件。
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.	Method & Remark
1	blur() 触发每个匹配元素的模糊事件。
2	blur(fn) 将函数绑定到每个匹配元素的模糊事件。
3	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) 将函数绑定到每个匹配元素的加载事件。
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) 将函数绑定到每个匹配元素的滚动事件。
29	select() 触发每个匹配元素的选择事件。
30	select(fn) 将函数绑定到每个匹配元素的select事件。
31	submit() 触发每个匹配元素的Submit事件。
32	submit(fn) 将函数绑定到每个匹配元素的Submit事件。
33	unload(fn) 将函数绑定到每个匹配元素的unload事件。