[webgis 0基础到找工作]------JavaScript--DOM 注册事件 day09
1.事件
事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。
例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片
1.1事件监听
结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。
addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听</title>
</head>
<body>
<h3>事件监听</h3>
<p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
<button id="btn">点击改变文字颜色</button>
<script>
// 1. 获取 button 对应的 DOM 对象
const btn = document.querySelector('#btn')
// 2. 添加事件监听
btn.addEventListener('click', function () {
console.log('等待事件被触发...')
// 改变 p 标签的文字颜色
let text = document.getElementById('text')
text.style.color = 'red'
})
// 3. 只要用户点击了按钮，事件便触发了！！！
</script>
</body>
</html>-
获取 DOM 元素
-
通过
addEventListener方法为 DOM 节点添加事件监听 -
等待事件触发，如用户点击了某个按钮时便会触发
click事件类型 -
事件触发后，相对应的回调函数会被执行
大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。
1.2事件类型
click 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】dblclick
1.3事件处理程序
addEventListener 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。
结论：【事件处理程序】决定了事件触发后应该执行的逻辑。
2.事件类型
可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。
2.1鼠标事件
鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。
mouseenter 监听鼠标是否移入 DOM 元素
mouseleave 监听鼠标是否移出 DOM 元素
2.2键盘事件
keydown 键盘按下触发
keyup 键盘抬起触发
2.3焦点事件
focus 获得焦点
blur 失去焦点
2.4文本框输入事件
input
3.事件对象
任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
<body>
<h3>事件对象</h3>
<p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
<hr>
<div class="box"></div>
<script>
// 获取 .box 元素
const box = document.querySelector('.box')
// 添加事件监听
box.addEventListener('click', function (e) {
console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');
// 事件回调函数的第1个参数即所谓的事件对象
console.log(e)
})
</script>
</body>事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。
接下来简单看一下事件对象中包含了哪些有用的信息：
-
ev.type当前事件的类型 -
ev.clientX/Y光标相对浏览器窗口的位置 -
ev.offsetX/Y光标相于当前 DOM 元素的位置
注：在事件回调函数内部通过 window.event 同样可以获取事件对象。
4.环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
<script>
// 声明函数
function sayHi() {
// this 是一个变量
console.log(this);
}
// 声明一个对象
let user = {
name: '张三',
sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性
}
let person = {
name: '李四',
sayHi: sayHi
}
// 直接调用
sayHi() // window
window.sayHi() // window
// 做为对象方法调用
user.sayHi()// user
person.sayHi()// person
</script>结论：
-
this本质上是一个变量，数据类型为对象 -
函数的调用方式不同
this变量的值也不同 -
【谁调用
this就是谁】是判断this值的粗略规则 -
函数直接调用时实际上
window.sayHi()所以this的值为window
5.回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
<script>
// 声明 foo 函数
function foo(arg) {
console.log(arg);
}
// 普通的值做为参数
foo(10);
foo('hello world!');
foo(['html', 'css', 'javascript']);
function bar() {
console.log('函数也能当参数...');
}
// 函数也可以做为参数！！！！
foo(bar);
</script>函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了！！！
我们回顾一下间歇函数 setInterval
<script>
function fn() {
console.log('我是回调函数...');
}
// 调用定时器
setInterval(fn, 1000);
</script>fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。
<script>
// 调用定时器，匿名函数做为参数
setInterval(function () {
console.log('我是回调函数...');
}, 1000);
</script>结论：
-
回调函数本质还是函数，只不过把它当成参数使用
-
使用匿名函数做为回调函数比较常见