jQuery教程
JQuery 事件
2019-09-09
0
0
我们可以使用事件创建动态网页，事件是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 - 如果提供，则标识要删除的特定侦听器。
事件类型
以下是跨平台和建议的事件类型,您可以使用JQuery进行绑定-
| Sr.No. | Event Type | 描述 |
|---|---|---|
| 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 | 卸载文档时发生。 |
事件属性
以下事件属性/属性是可用的,并且可以以独立于平台的方式安全地访问
| No. | Property | 描述 |
|---|---|---|
| 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)。 |
<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. | Method | 描述 |
|---|---|---|
| 1 | preventDefault() | 阻止浏览器执行默认操作。 |
| 2 | isDefaultPrevented() | 返回是否曾经在此事件对象上调用过event.preventDefault()。 |
| 3 | stopPropagation()] | 停止将事件冒泡到父元素，从而防止任何父处理程序收到该事件的通知。 |
| 4 | isPropagationStopped() | 返回是否曾经在此事件对象上调用过event.stopPropagation()。 |
| 5 | stopImmediatePropagation() | 停止执行其他处理程序。 |
| 6 | isImmediatePropagationStopped() | 返回是否曾经在此事件对象上调用event.stopImmediatePropagation()。 |
事件处理方法
下表列出了重要的事件相关方法-
| No. | Method | 描述 |
|---|---|---|
| 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
});
这是jQuery提供的所有支持方法的完整列表
| No. | Method | 描述 |
|---|---|---|
| 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事件。 |
