事件监听，又称为绑定事件
事件监听语法：元素对象.addEventListener（`事件类型`,执行函数）
什么是事件监听？让程序检测是否有事件发生，一旦有事件触发程序进行运行
事件监听三要素
事件源：哪个dom元素会被事件触发，要先获取那个dom元素
事件类型：用什么方法触发，比如鼠标单击click，鼠标经过使用mouseover等
事件调用的函数：需要做什么事情
古老版本的事件监听语法：元素对象.onclick = function(){ 执行代码体 }，但是相同的事件会冲突，下边的事件会覆盖上边的事件
// 元素对象.addEventListener(`事件类型`,`执行的函数`)
const btn = document.querySelector(`button`)
console.log(btn)
btn.addEventListener(`click`,function () {
alert(`hello,事件监听`)
btn.style.color = `red`
})
// btn.onclick = function () {
// alert(`华仔`)
// } 不太行的，相同事件类型会被覆盖，下层覆盖上层
btn.addEventListener(`click`,function () {
alert(`hello`)
alert(`world`)
})
事件类型
<center>
click 鼠标点击 <br>
mouseenter 鼠标经过 <br>
mouseleave 鼠标离开 <br>
focus 获得焦点 <br>
blur 失去焦点 <br>
keydown 键盘按下触发 <br>
keyup 键盘抬起触发 <br>
input 用户输入触发 <br>
change 输入框内容改变触发 <br>
</center>
<script>
const div = document.querySelector(`div`)
// 鼠标经过事件 mouseenter
div.addEventListener(`mouseenter`,function () {
console.log(`轻轻的我来了`)
})
// 鼠标离开事件 mouseleave
div.addEventListener(`mouseleave`,function () {
console.log(`轻轻的我走了`)
})
</script>
输入框获取焦点
<center>
// focus 获取焦点
// blur 失去焦点
</center>
<input type="text" name="" id="">
<script>
const input = document.querySelector(`input`)
console.log(input)
// focus 获取焦点
// blur 失去焦点
input.addEventListener(`focus`,function () {
console.log(`获取焦点`)
})
input.addEventListener(`blur`,function () {
console.log(`失去焦点`)
})
</script>
键盘事件
<center>
键盘事件： <br>
按下键盘 keydown <br>
弹起键盘 keyup <br>
</center>
<input type="text" name="" id="">
<script>
// 键盘事件 keydown
const input = document.querySelector(`input`)
console.log(input)
//键盘事件 keydown按下键盘的时候会触发
input.addEventListener(`keydown`,function () {
console.log(`按下键盘触发`)
})
// 键盘弹起事件 键盘一弹起就触发事件 keyup 经常用键盘弹起的时候，获取最新数据
input.addEventListener(`keyup`,function () {
console.log(`弹起键盘触发`)
})
</script>
input事件
<center>
输入触发事件 <br>
input事件输入文本就会触发事件 <br>
change事件输入文本以后，并且失去输入框的焦点，才会触发改事件 <br>
</center>
<input type="text" name="" id="">
<script>
const input = document.querySelector(`input`)
console.log(input)
input.addEventListener(`input`,function () {
console.log(input.value) //输入触发事件
})
// change事件 当改变input输入框以后，并且失去焦点的时候，才会触发
input.addEventListener(`change`,function () {
// console.log(`改变input中的内容并且失去焦点才会触发`)
console.log(input.value)
})
</script>
focus选择器
<input type="text" name="" id="">
<input type="checkbox" name="" id="1">
<script>
const check = document.querySelector(`[type="checkbox"]`)
console.log(check)
</script>
事件对象（重点）
<center>
事件对象是什么? <br>
也是个对象,这个对象里有事件触发时的相关信息 <br>
例如:鼠标点击事件中,事件对象就存了鼠标点在那个位置等信息 <br>
使用场景 <br>
可以判断用户按下那个键,比如按下回车键可以发布新闻 <br>
可以判断鼠标点击了哪个元素,从而做相应的操作 <br>
获取事件对象语法 <br>
</center>
<button>点击</button>
<input type="text" name="" id="">
<div data-id="10"></div>
<script>
const btn = document.querySelector(`button`)
console.log(btn)
btn.addEventListener(`click`,function (e) {
console.log(e) //事件对象我们通常使用 even ev e来表示
})
const input = document.querySelector(`input`)
console.log(input)
input.addEventListener(`keyup`,function (e) {
console.log(e)
//e.key判断用户按下什么键
if (e.key === `Enter`) {
console.log(`用户按了回车键`)
}
})
//事件对象
const div = document.querySelector(`div`)
console.log(div)
div.addEventListener(`keyup`,function () {
console.log()
})
</script>
换进对象（重点）
<center>
环境对象 this <br>
判断分析函数运行在不同环境中this的指向 <br>
普通函数是指向window <br>
</center>
<button>点击</button>
<script>
// // 普通函数里边 this指向window
// function fn() {
// console.log(this) //window
// } //声明的全局变量全局函数就是指向window的,挂在window下边
// fn()
//
// // setInterval(function () {
// // console.log(this) //指向window
// // },1000)
//
// const btn = document.querySelector(`button`)
// btn.addEventListener(`click`,function () {
// // console.log(this) //这里this指向,谁调用就指向谁 粗略规则 普通函数都有this箭头函数除外
// // btn.style.color = `red`
// this.style.color = `red`
// })
//
// // 对象中方法this
// let obj = {
// uname:`张`,
// sing:function (a,b) {
// console.log(this) //this指向obj
// }}
// obj.sing()
'use strict' //开启严格模式
//开启严格模式以后,定时器还是指向wind
// 普通函数this指向undefined
function f1() {
console.log(this)
}
f1()
// name()
// function name1() {
// // console.log(this)
// function name2() {
// console.log(this)
// }
// name2()
// }
// name1();
</script>
回调函数
什么是回调函数(callback)
把函数当作一个参数传到另外一个函数中,当我们需要用这个函数的时候,再回调运行()这个函数
回调函数,是一段可执行的代码段,它作为一个参数传递给其他代码,其作用是再需要的时候方便调用这段(回调函数)代码,作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数
把函数当作一个参数传到另外一个函数中,当需要用这个函数的时候,再后头调用这个函数
回调函数就是一段可只执行代码,他作为一个参数传递给其他的代码,起作用是在需要的时候方便调用这段(回调函数)代码,作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数
回调函数的特点
1,不会立即执行,回调函数作为参数传递给一个函数的时候,传递的只是函数的定义并不会立即执行.和普通的函数一样,回调函数再调用函数中也要通过()运算符嗲用才会执行
2,回调函数是一个闭包,回调函数是一个闭包,也就是说它能访问的其外层定义的变量
3,执行前类型判断,在执行回调函数前最好确认其实一个函数
回调函数中的this的指向问题
注意在回调函数调用this的执行上下文并不是回调函数定义时的那个上下文,而是调用它的函数所在的上下文
分析:this指向是离他最近的或者嵌套级别的function方法的调用者,这里离他最近的function是 function(n),会回到上边的callback(),这时候调用不是obj而是window
为什么舍近求远使用回调函数
javaScript是事件驱动的语言,这就意味着,js不会因为要等待一个响应而停止当前运行,在是在监听其他事件时继续执行