1. 事件监听

什么是事件?

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

什么是事件监听?

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件

比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

语法:

元素对象.addEventListener('事件类型识', 要执行的函数)

事件监听三要素:

事件源：那个dom元素被事件触发了，要获取dom元素

事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等

事件调用的函数：要做什么事

举例说明：

const button = document.querySelector('button')
button.addEventListener('click', function() {
    console.log('你点击了！')
})

注意：

1. 事件类型要加引号

2.函数是点击之后再去执行，每次点击都会执行一次

2. 事件监听版本

DOM LO

事件源.on事件 = function() {}

DOM L2

事件源.addEventListener(事件, 事件处理函数)

区别：

on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

发展史:

DQM L0：是 DOM 的发展的第一个版本; L：level

DOM L1：DOM级别1于1998年10月1日成为 W3C 推荐标准

DOM L2：使用 addEventListener 注册事件

DOM L3：DOM3 级事件模块在 DOM2 级事件的基础上重新定义了这些事件，也添加了一些新事件类型

3. 事件类型

鼠标事件：

click 鼠标点击

    <button>点我</button>
    <script>
        const btn = document.querySelector('button')
        
        btn.addEventListener('click', function() {
            console.log('你点到我了！')
        })
    </script>

mouseenter 鼠标经过

    <button>按钮</button>
   
    <script>
        const btn = document.querySelector('button')
       
        btn.addEventListener('mouseenter', function() {
            console.log('我进来了！')
        })
    </script>

mouseleave 鼠标离开

    <button>按钮</button>
   
    <script>
        const btn = document.querySelector('button')
       
        btn.addEventListener('mouseleave', function() {
            console.log('我出来了！')
        })
    </script>

焦点事件：

focus 获得焦点

    <input></input>
   
    <script>
        const ipt = document.querySelector('input')
       
        ipt.addEventListener('focus', function() {
            console.log('获得焦点！')
        })
    </script>

blur 失去焦点

    <input></input>
   
    <script>
        const ipt = document.querySelector('input')
       
        ipt.addEventListener('blur', function() {
            console.log('失去焦点！')
        })
    </script>

键盘事件：

keydown 键盘按下触发

    <input></input>
   
    <script>
        const ipt = document.querySelector('input')
       
        ipt.addEventListener('keydown', function() {
            console.log('键盘按下')
        })
    </script>

keyup 键盘抬起触发

    <input></input>
   
    <script>
        const ipt = document.querySelector('input')
       
        ipt.addEventListener('keyup', function() {
            console.log('键盘抬起')
        })
    </script>

文本事件：

input 用户输入事件

    <input></input>
   
    <script>
        const ipt = document.querySelector('input')
       
        ipt.addEventListener('input', function() {
            console.log('您输入了内容！')
        })
    </script>

4. 获取事件对象

事件对象是什么

也是个对象，这个对象里有事件触发时的相关信息

例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素，从而做相应的操作

语法：如何获取

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

元素.addEventListener('click', function(e) {
    console.log(e)
})

部分常用属性

type

获取当前的事件类型

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY

获取光标相对于当前DOM元素左上角的位置

key

用户按下的键盘键的值

现在不提倡使用keyCode

5. 环境对象

环境对象：指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境

作用：弄清楚 this 的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同

[ 谁调用， this 就是谁 ] 是判断 this 指的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

    <button>按钮</button>
    <script>
        const btn = document.querySelector('button')
        
        btn.addEventListener('click', function(e) {
            console.log(this)
        })
    </script>

6. 回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数

简单理解: 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

常见的使用场景:

function fn() {
    console.log('我是回调函数！')
}
setInterval(fn, 1000)

btn.addEventListener('click', function(e) {
    console.log('我也是回调函数！')
})