1. 事件监听
1.什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
2.什么是事件监听?
用户在网页上的一些行为动作的监听 做出响应
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
2.事件监听的语法
语法:
1.元素对象:addEventListener('事件类型',要执行的函数)
2.事件源.on事件 = function() { }
区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
事件监听三要素：
事件源： 那个dom元素被事件触发了，要获取dom元素
事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数： 要做什么事
3.事件类型
鼠标事件:
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
焦点事件:
focus 获得焦点
blur 失去焦点
键盘事件:
Keydown 键盘按下触发
Keyup 键盘抬起触发
文本事件:
input 用户输入事件
例:
box.addEventListener('mouseover', function () {
box.style.backgroundColor = 'pink'
})
4.事件对象
一 获取事件对象:
1.什么是事件对象?
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
2.事件对象在哪里？
在事件绑定的回调函数的第一个参数就是事件对象
使用场景:
可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作
2.语法：如何获取
元素对象:addEventListener('事件类型',function(e){})
二 事件对象部分常用属性
1. type 获取当前的事件类型
2. e.key 用户按下的键盘键的值
3. e.preventDefault() 阻止默认事件
4. e.stopPropagation()阻止事件流动
5. e.target 事件目标(触发本次冒泡的子元素)
例:
document.addEventListener('click', function (e) {
console.log(e.clientY, e.offsetY)
})
document.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
console.log(1);
}
})
5.环境对象
什么是环境对象?
指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
说人话:
不同环境中 this 所指代的对象 , 谁调用，this 就是谁
例:
function fn() {
console.log(this)
}
fn()
const btn = document.querySelector('#btn')
btn.addEventListener('click', fn)
6.回调函数
1.把函数当做另外一个函数的参数传递，这个函数就叫回调函数
2.回调函数本质还是函数，只不过把它当成参数使用
3.使用匿名函数做为回调函数比较常见
例:
function fn(callback) {
callback()
}
fn(function () {
console.log(1)
})
