hi 本周复习一下dom事件相关内容

事件监听

1、什么是事件？事件是在编程时系统内发生的动作或者发生的事情；

什么是事件监听？

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

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

微信截图_20221113225508.png

2、事件监听三要素：

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

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

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

    // 需求： 点击了按钮，弹出一个对话框
    // 1. 事件源   按钮  
    // 2.事件类型 点击鼠标   click 字符串
    // 3. 事件处理程序 弹出对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('你早呀~')
    })

  </script>

注意：

事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次，一秒延迟。

1.2 事件监听版本

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

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

DOM L2：使用addEventListener注册事件（目前使用

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

事件类型

1、鼠标事件：鼠标触发

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

2、焦点事件：表单获得光标

focus 获得焦点

blur 失去焦点

3、键盘事件：键盘触发 Keydown 键盘按下触发

Keyup键盘抬起触发

4、文本事件：表单输入触发 input 用户输入事件

事件对象

1、事件对象是什么

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

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

2、使用场景

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

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

3、如何获取

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

一般命名为event、ev、e

微信截图_20221113234321.png

 const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
      // console.log(11)
      // console.log(e.key)
      if (e.key === 'Enter') {
        console.log('我按下了回车键')
      }
    })

环境对象

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

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

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

【谁调用， this 就是谁】是判断 this 指向的粗略规则

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

回调函数

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

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

常见的使用场景

ok 下周不要偷懒了继续学习吧= =

【博学谷学习记录】超强总结 用心分享|前端学习w8-javascript-Dom事件基础