事件对象

  • 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数

  • 在事件对象中封装了当前事件相关的一切信息

    比如:鼠标的坐标,键盘那个按键被按下,鼠标滚轮滚动的方向……

image-20210516232206338

鼠标坐标显示练习

clientX,clientY

  • 分别获取鼠标指针的水平坐标,垂直坐标
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
37
38
39
40
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
//当鼠标在areaDiv中移动时,在showMsg中来显示坐标
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
areaDiv.onmousemove = function(event){
var x = event.clientX;
var y = event.clientY;

//在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = "+ x + " , y = "+ y;
};
};
</script>
<style>
#areaDiv{
width: 600px;
height: 200px;
border: 2px black solid;
margin: 0 auto;
}
#showMsg{
margin: 20px auto;
width: 600px;
height: 100px;
border: 2px black solid;
}
</style>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>

输出结果为:

image-20210516233440131

亲自试一试:鼠标坐标显示练习

div跟随鼠标移动练习

  • clientXclientY用于获取鼠标在当前可见窗口的坐标
  • 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
}
body{
height: 3000px;
}
</style>
<script>
window.onload = function(){
document.onmousemove = function(event){
var box1 = document.getElementById("box1");
var left = event.pageX;
var top = event.pageY;
//设置偏移量
box1.style.left = left + "px";
box1.style.top = top + "px";
}
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

输出结果为:

image-20210517000310300

亲自试一试:div跟随鼠标移动练习

事件的冒泡(Bubble)

  • 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发

  • 在开发中,大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

  • 可以将事件对象的cancelBubble设置为true,即可取消冒泡

    event.cancelBubble = true;

事件的委派

  • 指将事件统一绑定给元素的共同祖先元素,这样当后代元素上的事件被触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
  • 事件的委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序性能
  • 事件中target表示触发事件的对象

事件的绑定

  • 使用 对象.事件 = 函数 的形式绑定响应函数

    它只能同时为一个元素的一个事件绑定一个响应函数

    不能绑定多个,如果绑定多个,后面的会覆盖掉前面函数

  • addEventListener()

    这个方法也可以为元素绑定响应函数

    • 参数:
      1. 事件的字符串,不要on
      2. 回调函数,当事件触发时该函数会被调用
      3. 是否在捕获阶段触发事件,需要一个布尔值,一般传false
  • 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数

    这样当事件被触发时,响应函数将会按照函数的绑定顺序执行

1
2
3
4
5
6
7
8
9
10
var btn01 = document.getElementById("btn01");
btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);
btn01.addEventListener("click",function(){
alert(3);
},false);

上述例子将会分别弹出3个警告框

  • 使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false

    需要使用event.preventDefault();

拖拽练习

  • 拖拽流程
    1. 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
    2. 当鼠标移动时被拖拽的元素跟随鼠标移动 onmousemove
    3. 当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
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
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
box1.onmousedown = function(event){
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;

document.onmousemove = function(event){
var left = event.clientX - ol;
var top = event.clientY - ot;

box1.style.left = left + "px";
box1.style.top = top + "px";

};

document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
}

</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

亲自试一试:拖拽练习

滚轮的事件

  • onwheel即滚轮事件

  • event.wheelDelta可以获取滚轮滚动的方向

    向上滚 :120 向下滚:-120

    wheelDelta不看大小,只看正负

    火狐使用event.detail

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
box1.onwheel = function(event){
if(event.wheelDelta > 0 || event.detail < 0){
box1.style.height = box1.clientHeight - 30 + "px";
}else{
box1.style.height = box1.clientHeight + 30 + "px";
}
//取消浏览器滚轮默认事件
return false;
};
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

亲自试一试:滚轮的事件

键盘的事件

  • onkeydown

    按键被按下

    如果按着某个按键不松手,则事件会一直触发

    • 通过keyCode来获取按键的编码event.keyCode

    • altKey,ctrlKey,shiftKey

      这三个按键用来判断alt,ctrl和shift是否被按下

      如果按下则返回true,否则返回false

  • onkeyup

    按键被松开

  • 键盘事件一般绑定给一些能获取到焦点的对象或者是document

  • 键盘移动div(含shift加速)

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#info{
text-align: center;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
document.onkeydown = function(event){
var speed = 10;
if(event.shiftKey){
speed = 50;
}
switch(event.keyCode){
case 37:
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 38:
box1.style.top = box1.offsetTop - speed + "px";
break;
case 39:
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 40:
box1.style.top = box1.offsetTop + speed + "px";
break;
};
}
};
</script>
</head>
<body>
<div id="info">
<div>→ ← ↑ ↓控制移动</div>
<div>按住shift键+方向键加速前进</div>
</div>
<div id="box1"></div>
</body>
</html>

亲自试一试:键盘移动div