jQuery事件
jQuery是为事件处理特别设计的
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
$("p").click(function(){
事件行为
});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点我啊</title>
<script src="js/jQuery/jquery-3.4.1.min.js">
</script>
<script>
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>
dblclick()
当双击元素时,会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>再点我</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("p").dblclick(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的,我就消失。</p>
<p>双击我消失!</p>
<p>双击我也消失!</p>
</body>
</html>
还有其他很多事件的方法,可以参考文档手册(摘抄于网络):
方法 | 描述 |
向匹配元素附加一个或更多事件处理器 | |
触发、或将函数绑定到指定元素的 blur 事件 | |
触发、或将函数绑定到指定元素的 change 事件 | |
触发、或将函数绑定到指定元素的 click 事件 | |
触发、或将函数绑定到指定元素的 double click 事件 | |
向匹配元素的当前或未来的子元素附加一个或多个事件处理器 | |
移除所有通过 live() 函数添加的事件处理程序。 | |
触发、或将函数绑定到指定元素的 error 事件 | |
返回 event 对象上是否调用了 event.preventDefault()。 | |
相对于文档左边缘的鼠标位置。 | |
相对于文档上边缘的鼠标位置。 | |
阻止事件的默认动作。 | |
包含由被指定事件触发的事件处理器返回的最后一个值。 | |
触发该事件的 DOM 元素。 | |
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 | |
描述事件的类型。 | |
指示按了哪个键或按钮。 | |
触发、或将函数绑定到指定元素的 focus 事件 | |
触发、或将函数绑定到指定元素的 key down 事件 | |
触发、或将函数绑定到指定元素的 key press 事件 | |
触发、或将函数绑定到指定元素的 key up 事件 | |
为当前或未来的匹配元素添加一个或多个事件处理器 | |
触发、或将函数绑定到指定元素的 load 事件 | |
触发、或将函数绑定到指定元素的 mouse down 事件 | |
触发、或将函数绑定到指定元素的 mouse enter 事件 | |
触发、或将函数绑定到指定元素的 mouse leave 事件 | |
触发、或将函数绑定到指定元素的 mouse move 事件 | |
触发、或将函数绑定到指定元素的 mouse out 事件 | |
触发、或将函数绑定到指定元素的 mouse over 事件 | |
触发、或将函数绑定到指定元素的 mouse up 事件 | |
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 | |
文档就绪事件(当 HTML 文档就绪可用时) | |
触发、或将函数绑定到指定元素的 resize 事件 | |
触发、或将函数绑定到指定元素的 scroll 事件 | |
触发、或将函数绑定到指定元素的 select 事件 | |
触发、或将函数绑定到指定元素的 submit 事件 | |
绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 | |
所有匹配元素的指定事件 | |
第一个被匹配元素的指定事件 | |
从匹配元素移除一个被添加的事件处理器 | |
从匹配元素移除一个被添加的事件处理器,现在或将来 | |
触发、或将函数绑定到指定元素的 unload 事件 |