CRainyDay

jQuery中的事件

一.加载DOM

在页面加载完毕后, 浏览器会通过JS为DOM元素添加事件. 在常规JS代码中, 通常使用window.onload方法, 而在jQuery中使用$(document).ready()方法, 可简写为$().

两者区别:

  1. window.onload必须等待网页中的所有内容加载完毕后(包括图片)才能执行其中代码, 而且只会有一个window.onload会执行, 因为后续修改window.onload会覆盖之前的
  2. $(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
//html代码还是上方的
$(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");
//return false;//阻止事件冒泡
});
});
</script>
</head>
<body>body
<div class="content">div
<p>p</p>
</div>
</body>

六.事件对象的属性

事件对象: 当事件被触发时, 事件对象就被创建了. 在程序中使用事件对象, 只需要为事件对象的响应函数添加一个参数来接收该事件对象. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象便被销毁.

常用到的事件对象的属性:

event.pageX, event.pageY: 获取光标相对于页面(而不是浏览器窗口)的x,y坐标


 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有