jQuery中的事件
一.加载DOM
在页面加载完毕后, 浏览器会通过JS为DOM元素添加事件. 在常规JS代码中, 通常使用window.onload方法, 而在jQuery中使用$(document).ready()方法, 可简写为$().
两者区别:
- window.onload必须等待网页中的所有内容加载完毕后(包括图片)才能执行其中代码, 而且只会有一个window.onload会执行, 因为后续修改window.onload会覆盖之前的
- $(document).ready()在网页中的DOM结构绘制完毕之后便会执行, 可能DOM元素关联的东西并没有加载完成, 而且这个函数可编写多个, 这多个中的代码均会执行.
二.绑定事件
html部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <head>
<meta charset="UTF-8">
<title>index</title>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.panel{
width: 400px;
margin: 0 auto;
}
.head{
width: 400px;
background-color: #bfa;
}
.head:hover{
cursor: pointer;
}
.content{
width: 400px;
background-color: #98C8EF;
display: none;
}
</style>
</head>
<body>
<div class="panel">
<h2 class="head">什么是jQuery?</h2>
<div class="content">
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
</div>
</div>
</body>
|
1.直接绑定
is()方法: 用来判断给定的某个jQuery对象是否符合指定的jQuery选择器
1
2
3
4
5
6
7
8
9
10
| $(function(){
$(".head").click(function(){
var flag = $(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
});
|
2.bind()绑定
1
2
3
4
5
6
7
8
9
10
| $(function(){
$(".head").bind("click",function(){
var flag = $(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
});
|
三.合成事件
hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.
toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发第一个函数, 再次单击同一个元素, 触发第二个函数. 之后依次类推. 现在废除了之前说的作用, 只用来切换元素的可见性
1.hover()
1
2
3
4
5
6
7
8
|
$(function(){
$(".head").hover(function(){
$(".content").show();
},function(){
$(".content").hide();
});
});
|
四.移除事件
unbind()方法:
移除某按钮上所有的click事件: $("#btn").unbind(“click”);
移除某按钮上所有的事件: $("#btn").unbind();
one()方法:
该方法可以为元素绑定处理函数. 当处理函数触发一次后, 便会被立即删除. 即在每个对象上, 事件处理函数只会被执行一次.
五.事件冒泡
事件会按照DOM层次结构像水泡一样不断向上, 直到传递到顶端
解决: 在事件处理函数中返回false, 会对事件停止冒泡, 还可以停止元素的默认行为.
由于事件的冒泡, 以下例子中, 点击p标签会向上传递点击事件, body和div的点击事件也会被触发.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <head>
<meta charset="UTF-8">
<title>index</title>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
.content{
width: 200px;
height: 200px;
background-color: #bfa;
}
p{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
$(function() {
$("body").click(function(){
alert("body click");
});
$(".content").click(function(){
alert("div click");
});
$("p").click(function(){
alert("p click");
});
});
</script>
</head>
<body>body
<div class="content">div
<p>p</p>
</div>
</body>
|
六.事件对象的属性
事件对象: 当事件被触发时, 事件对象就被创建了. 在程序中使用事件对象, 只需要为事件对象的响应函数添加一个参数来接收该事件对象. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象便被销毁.
常用到的事件对象的属性:
event.pageX, event.pageY: 获取光标相对于页面(而不是浏览器窗口)的x,y坐标
