事件、事件对象

1. 如何绑定、解绑事件?

DOM0 的事件机制 (只会在冒泡阶段执行、无法在捕获阶段执行)

元素.on事件名 = 回调函数

例如:

1
2
3
4
5
6
obj.onclick = function(){
console.log("a")
}
obj.onclick = function(){
console.log("b")
}

DOM2 的事件机制 (官方觉得DOM0功能太少,所以添加了一个功能更强大的事件机制)

元素.addEventListener(‘事件名’,回调函数,是否在捕获阶段出发(默认false))

绑定函数元素.removeEventListener

1
2
3
4
5
6
obj.addEventListener('click',function(){
console.log('a')
})
obj.addEventListener('click',function(){
console.log('b')
})

DOM2 比 DOM0好在哪?

1、同一个事件、可以绑定多个回调函数

2、可以通过第三个参数、让事件在冒泡或捕获阶段执行

3、还提供了一个绑定的函数

2. 事件的阶段:什么是冒泡?什么是捕获?

事件在执行时分为两个阶段:冒泡捕获

冒泡: 从里层元素向外层元素依次触发事件

捕获:从外层元素向里层元素依次触发事件

注意: DOM0只支持冒牌

3. 什么是事件对象?干什么用的?

事件会被绑定到一个函数上、这个函数我们可以添加一个参数、而这个参数就叫事件对象

事件对象中包含这个事件在出发时的相关信息:鼠标在事件触发时的位置、点击键盘是哪个键

1
2
3
4
obj.onclick = function(e){
// 打印事件对象,查看事件相关信息
console.log('a')
}

案例:球移动鼠标点击的位置

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
class Bullet {
// 构造函数(在创建球时会自动被执行)
constructor(x=0,y=0,speed=1) {
// 创建球
this._o = document.createElement('div')
this._o.classList.add('ball')
document.body.appendChild(this._o)
// 初始位置
this.x = x
this.y = y
this._o.style.left = this.x + 'px'
this._o.style.top = this.y + 'px'
// 移动速度
this.speed = speed
}
// 移动到某一点
moveTo(dx,dy) {
// 当前位置
let cx = this.x
let cy = this.y
// 先计算要移动的下一个位置的新坐标
if(cx > dx) {
// 子弹在右边,向左移动
this.x -= this.speed
this.y = this.line(cx,cy,dx,dy,this.x)
}
else if(cx < dx) {
// 子弹在左边,向右移动
this.x += this.speed
this.y = this.line(cx,cy,dx,dy,this.x)
}
else {
// 子弹和目标在同一条竖线上
if(cy > dy) {
// 在下边就向上移动
this.y -= this.speed
}else{
// 在上边就向下移动
this.y += this.speed
}
}
// 设置这个位置
this._o.style.left = this.x + 'px'
this._o.style.top = this.y + 'px'
}
// 已知两个点的坐标,求出经过两个点的线性方程式
// 前四个参数是已知的两点坐标
// 然后传入第五个参数x坐标就能算 出相应 的在直线上的y
// 注意:坐标系转换:因为网页中所有y坐标都是正的,而数学中的
// y坐标向下应该是负的,所以我们在公式中需要将所有的y
// 坐标都乘-1变成负的,所以得到以下方程
line(x1,y1,x2,y2,x) {
return y1-(x-x1)*(y1-y2)/(x2-x1)
}
}

// 页面中放一个子弹
var bullet = new Bullet()

// 保存鼠标点击的位置
var mx = 0
var my = 0

// 为页面绑定鼠标点击事件
window.addEventListener('click', function(e){
// 把鼠标点击的位置保存到变量中
mx = e.x
my = e.y
})

// 启动一个定时器实现主动画
function loop() {
// 子弹移动到鼠标点击的位置
bullet.moveTo(mx,my)
requestAnimationFrame(loop)
}

requestAnimationFrame(loop)