Web APIs -day2
掌握事件绑定处理和事件对象，完成常见网页交互
事件监听
以前写的代码都是自动执行的，我们希望一段代码在某个特定的时机才去执行，比如
- 点击按钮可以弹出警示框
- 比如鼠标经过显示下拉菜单等等
事件
事件是程序在运行的时候，发生的特定动作或者特定的事情
通常，当事件发生时，可以做些事情
- 比如点击按钮，可以
弹出警示框
- 比如鼠标经过某个盒子，可以
显示下拉菜单
事件监听
事件发生后，想要执行的代码写到事件处理函数里面
- 当触发指定的事件时，则事件处理函数就会被执行
- 事件监听是将事件处理函数注册到元素对象身上
- 事件监听也称为: 事件注册、事件绑定
语法：
1
| 元素对象.addEventListener('事件类型', 事件处理函数)
|
事件监听三要素
- 事件源(谁被触发了)
- 事件类型 (什么情况下触发，点击还是鼠标经过等)
- 事件处理函数（要做什么事情）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听</title>
</head>
<body>
<button class="btn">唐伯虎</button>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
alert('秋香')
})
</script>
</body>
</html>
|
注意：
1.事件类型要加引号，小写
2.函数是点击之后再去执行，每次点击都会执行一次
回调函数
**回调函数:**当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数（回头调用的函数）
**作用：**完成某些特定任务
1
2
3
4
5
6
7
8
9
10
11
| <script>
setInterval(function () {
console.log('我是回调函数')
}, 1000)
btn.addEventListener('click', function () {
console.log('我是回调函数')
})
</script>
|
事件监听版本
-
DOM0 事件
事件源.on事件类型 = function() { }
1
2
3
| btn.onclick = function () {
alert('我是弹窗1')
}
|
-
DOM 2事件
事件源.addEventListener(事件类型，事件处理函数)
1
2
3
| btn.addEventListener('click', function () {
console.log('我是回调函数')
})
|
区别：
on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用
事件类型
将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。
事件类型的大小写敏感的字符串，统一用小写字母
鼠标事件
鼠标事件是指跟鼠标操作相关的事件，如单击、经过等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
box.addEventListener('click', function () {
console.log('我点击了盒子')
})
box.addEventListener('mouseenter', function () {
console.log('我鼠标经过了盒子')
})
box.addEventListener('mouseleave', function () {
console.log('我鼠标离开了盒子')
})
</script>
</body>
|
焦点事件
主要是针对于表单是否获得光标的事件， 获得焦点 focus 、失去焦点 blur
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点事件</title>
<style>
[type=text] {
width: 245px;
height: 50px;
padding-left: 20px;
border: 1px solid #ccc;
font-size: 17px;
outline: none;
}
</style>
</head>
<body>
<input type="text" class="search-text">
<input type="text" class="search">
<script>
const search_text = document.querySelector('.search-text')
search_text.addEventListener('focus', function () {
console.log('获得了焦点')
})
search_text.addEventListener('blur', function () {
console.log('失去了焦点')
})
const search = document.querySelector('.search')
search.focus()
</script>
</body>
</html>
|
| 事件 |
触发时机 |
得到表单值 |
| keydown |
按下键盘时触发 |
不带最后一次按键值 ab |
| keyup |
弹起键盘时触发 |
输入内容 abc |
| input |
表单value发生变化时触发 |
输入内容 abc |
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input事件和键盘事件</title>
<style>
textarea {
width: 300px;
height: 30px;
padding: 10px;
border-color: transparent;
outline: none;
resize: none;
background: #f5f5f5;
border-radius: 4px;
}
</style>
</head>
<body>
<textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
<script>
const tx = document.querySelector('#tx')
tx.addEventListener('keydown', function () {
console.log('我是keydown事件' + tx.value)
})
tx.addEventListener('keyup', function () {
console.log('我是keyup事件' + tx.value)
})
tx.addEventListener('input', function () {
console.log('我是input事件' + tx.value)
})
</script>
</body>
</html>
|
注意事项
- 执行顺序 keydown → input → keyup
- keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容
事件对象
**事件对象是什么？ **
- 也是个对象，这个对象里有事件触发时的相关信息，包含属性和方法
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景
- 可以判断用户按下哪个键，比如按下回车键可以发布新闻
- 可以判断鼠标点击了哪个元素，从而做相应的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <body>
<div class="box"></div>
<textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
<script>
const box = document.querySelector('.box')
box.addEventListener('click', function (e) {
console.log(e)
})
const tx = document.querySelector('#tx')
tx.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
alert('您按下了回车键')
}
})
</script>
</body>
|
事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。
环境对象
能够分析判断函数运行在不同环境中 this 所指代的对象。
**环境对象：**指的是函数内部特殊的 this, 它指向一个对象，并且受当前环境影响
**作用：**弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
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
| <body>
<button>点击</button>
<script>
function fn() {
console.log(this)
}
window.fn()
const obj = {
uname: '佩奇',
sing: function () {
console.log(this)
}
}
obj.sing()
const btn1 = document.querySelector('button')
btn1.addEventListener('click', function () {
this.style.backgroundColor = 'pink'
})
</script>
</body>
|
排他思想
是一种思路，目的是突出显示某个元素
比如，有多个元素，当鼠标经过时，只有当前元素会添加高亮样式，其余的元素移除样式
口诀：注意顺序
①：排除其他人
②：保留我自己
