jQuery事件处理：从基础到实践,-优快云博客

本文链接：https://blog.youkuaiyun.com/fhjkkkjh/article/details/129578851

1.1 常见事件

js中都是onXX(标签的属性) jQuery(方法) 赋的值是函数，（回调）

语法：

jq 对象.事件函数();

扩展：将响应函数当参数传递给click函数 —> 类似lamdba

鼠标事件	键盘事件	表单事件	文档/窗口事件
click：单击	keypress	submit	load
dblclick：双击	keydown	change	resize
mouseenter：检测鼠标触碰	keyup	focus	scroll
mouseleave：检测鼠标离开		blur	unload

<body>
<button id="btn1">按钮</button>
<script src="../js/jquery-2.1.0.js"></script>
<script>
// $("#btn1").click(function (){
// alert("点我！")
// });
// dblclick() 双击
$("#btn1").dblclick(() => {
alert("又点我啦")
})
</script>
</body>

1.2 事件语法

jQuery 事件方法语法：

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

jq对象.事件方法(),例如

$(“#i1”).click()

1.3 鼠标事件

<body>
<button id="btn-1">点单击事件</button>
<button id="btn-2">点双击击事件</button>
<div
id="box"
style="width: 200px; height: 200px; border: 2px red solid"
></div>
<script src="./js/jquery-2.1.0.js"></script>
<script>
var count = 0;
/**
* 1 选择事件源
* 2 绑定事件
* 3 设置响应函数
*/
$("#btn-1").click(function () {
count++;
console.log("单击:" + count);
});

$("#btn-2").dblclick(function () {
console.log("双击");
});
// $("#box").mouseover(function () {
// console.log("鼠标进入");
// });
// $("#box").mouseout(function () {
// console.log("鼠标离开");
// });

// 链式语法,其实就是链式调用,连着调用
$("#box").mouseover(function () {
console.log("鼠标进入");
}).mouseout(function () {
console.log("鼠标离开");
}).mousemove(function () {
console.log("鼠标移动");
});
</script>
</body>

1.4 键盘事件

keydown
keyup
keypress

<body>

<input id="input-1" />
<script src="./js/jquery-2.1.0.js"></script>
<script>
/**
* 1 选择事件源
* 2 绑定事件
* 3 设置响应函数
*/
$("#input-1")
.keydown((event) => {
console.log("键盘按下");
if (event.keyCode == 13) {
console.log("按下回车,提交表单");
}
})
.keyup(() => {
console.log("键盘弹起");
})
.keypress(function () {
console.log("键盘按压");
});
</script>
</body>