什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
jQuery 是为事件处理特别设计的。
实例：
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
常见 DOM 事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | | blur | unload |
| hover | | | |
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突，则重命名 jQuery 库
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
| Event 函数 | 绑定函数至 |
|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 使用JQuery 第一步就是引入jq文件 -->
<script src="./js/jquery3.4.1.js"></script>
<style>
#div3,
#div1 {
width: 100px;
height: 100px;
border: 1px solid black;
/* background-color: red; */
}
</style>
</head>
<body>
<!-- JQuery 1.x 版本兼容IE8及以下的版本 IE6
JQuery 2.x 开始 就不兼容IE8
最新版本 体积小 效率快
1.8.3 -->
<!--
1.起始标识符 $
2.选择器 css3九大选择器
3.方法
-->
<div id="div1">
这是一个DIV
</div>
<button type="button" id="bt1">按钮1</button>
<button type="button" id="bt2">按钮2</button>
<div id="div3">
DIV3
</div>
<script>
//JQuery鼠标点击事件
$("#bt1,#bt2").click(function (event) {
console.log('hello');
})
//要求div出现弹窗效果
$("#div3").dblclick(function (event) {
alert("我被双击了")
})
/*hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，
会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。*/
$(document).ready(function () {
$("#div1").hover(
function () {
alert("你进入了 !");
},
function () {
alert("拜拜! 现在你离开了 p1!");
}
)
});
$(function () {
$("#div3").hover(function () {
//鼠标进来
$("#div3").html("大爷，你来了");
}, function () {
//鼠标离开
$("#div3").html("大爷，请走好");
})
});
//第一个回调函数代表鼠标进入
//第二个回调函数代表鼠标离开
//2级DOM事件监听
var bt = document.querySelector("#bt1");
bt.addEventListener("click", function (event) {
console.log("world");
})
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
