[Web 前端] 028 jQuery 事件
Posted yorkyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Web 前端] 028 jQuery 事件相关的知识，希望对你有一定的参考价值。
目录
jQuery 的事件
1. 事件绑定
1.1 事件的获取
- 记下方的代码为
code1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
#item1{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<script>
// ...... (1)
</script>
<div id="item1"></div>
<script>
// ...... (2)
</script>
</body>
</html>1.1.1 若在 code1 的 (1) 处加入如下程序
console.log("$('#item1') =", $('#item1'));- 因为
item1在下方，且程序自上而下运行，所以此时还获取不到item1 - 解决办法见 1.1.2
1.1.2 两种解决办法
// 1. 当页面加载完成之后触发 ready
$(document).ready(function(){
console.log("$('#item1') =", $('#item1')); // 加载完成之后执行此代码可以获取到 #item1
});// 2. 当文档加载完成之后自动调用自己（与 1. 同效，并且 2 是 1 的缩写）
$(function(){
console.log("$('#item1') =", $('#item1'));
});1.2 基本绑定
- 下方 1.2.1-1.2.4 的代码写在 code1 的 (2) 处，因为 (2) 处于 div 的下方，比 (1) 处方便
1.2.1 click 基本事件绑定
$('#item1').click(function(){
console.log("click 单击事件");
});1.2.2 dblclick 双击事件
$('#item1').dblclick(function(){
console.log("dblclick 双击事件");
});1.2.3 bind 方法绑定
$('#item1').bind("click", function(){
console.log("bind 绑定事件方法");
});1.2.4 补充：解除绑定
- 注意
- 如果不指定解除的事件，那么就会解除元素上的所有事件
- 如要解除指定的事件，那就给它传指定事件的参数
$('#item1').unbind(); // 解除 #item1 上的所有事件$('#item1').unbind("click"); // 只解除 #item1 的单击事件1.3 动态绑定
- 注意：live 方法在高版本(>1.8.3)的 jQuery 中被移出了，使用时请注意版本
$(element).live("click", function(){});2. 事件触发
2.1 触发的写法
- 当我们想要去触发某个元素的事件时，可以使用
trigger - 注意：需指定元素的事件类型
$(element).trigger('click'); // 必须指定元素的事件类型，如此处的 click2.2 常用的鼠标事件
| 事件 | 对应的名称 |
|---|---|
| 鼠标单击事件 | click |
| 鼠标双击事件 | dbclick |
| 鼠标移入事件 | mouseover |
| 鼠标移出事件 | mouseout |
| 鼠标按下事件 | mousedown |
| 鼠标抬起事件 | mouseup |
| 鼠标移动事件 | mousemove |
- 用法示例
$('div').mousedown(function(){
console.log("鼠标被按下了");
});- 想要使用别的事件，只需将上方 mousedown 改成相应的事件名称即可
3. 事件冒泡和默认行为
3.1 事件冒泡
- 当触发一个元素的事件时，其自动触发该元素的父级和先辈级的同类型事件，造成事件并发，导致页面混乱，我们称为之事件冒泡
- 此时我们可以在元素的事件处理函数中返回一个
false来进行阻止 - 注意：这个方法仅限于在 jQuery 中使用
3.2 默认行为
- 在页面中，有些元素是具备默认行为的，例如
- a 链接的单击
- 表单的提交
- 以上元素都会进行跳转或提交，这些行为被称为“默认行为”
- 但是，在绑定上事件后，它会首先先执行事件，然后执行默认行为
- 若我们只想让其触发事件，但不执行默认行为，我们可以在该元素的事件中返回一个
false来阻止默认行为
<a href="https://www.cnblogs.com">点我去博客园</a>$('a').click(function(){
alert("单击事件被触发了");
return false; // 阻止默认行为
});4. 获得当前鼠标的位置和按下的按键
4.1 鼠标事件
- 在触发事件时，如果我们想要获取鼠标的位置或键盘按键信息
- 首先，需要在当前的事件中传递一个事件对象
event
- 首先，需要在当前的事件中传递一个事件对象
/* event 事件对象
通过此对象，可以获取鼠标当前单击时的位置
clientX, clientY 相对于窗口的偏移位置
offsetX, offsetY 相对于元素的偏移位置
pageX, pageY 相对于文档的偏移位置
screenX, screenY 相对于屏幕的偏移位置
type 事件类型
*/
$(element).click(function(e){
// e for enent，类似于在 Python 中写 Class 时要加 self
// 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于浏览器窗口
console.log("(%d, %d)", e.clientX, e.clientY);
// 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于文档
var x = e.pageX;
var y = e.pageY;
console.log("(%d, %d)", x, y);
// ...
});4.2 键盘事件
// 可以打印 e 对象，或者直接使用该对象中的 keyCode 属性来获取按键信息
$(window).keydown(function(e){
var key = e.keyCode;
console.log("e =", e);
console.log("key =", key); // 可以试验出按键对应的编码
});以上是关于[Web 前端] 028 jQuery 事件的主要内容，如果未能解决你的问题，请参考以下文章
从零开始学 Web 之 jQuery事件冒泡，事件参数对象，链式编程原理