【JS】Chapter7-Dom 事件基础

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

（七）Dom 事件基础

1. 事件监听（绑定）

1.1 事件监听

• 什么是事件？

  • 事件是在编程时系统内发生的动作或者发生的事情
  • 比如用户在网页上单击一个按钮

• 什么是事件监听？

  • 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件
  • 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

• 语法：

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

• 事件监听三要素：

  • 事件源：那个dom元素被事件触发了，要获取dom元素
  • 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
  • 事件调用的函数：要做什么事

• 例子：

  <button>按钮</button>
  <script>
      const btn = document.querySelector('.btn')
      // 修改元素样式
      btn.addEventListener('click', function() {
          alert('点击了~')
      })
  </script>

• 注意：

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

1.2 拓展阅读------事件监听版本

• DOM L0
  • 事件源.on事件 = function() { }
• DOM L2
  • 事件源.addEventListener(事件，事件处理函数)
• 区别：
  • on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
• 发展史：
  • DOM L0：是 DOM 的发展的第一个版本； L：level
  • DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
  • DOM L2：使用addEventListener注册事件
  • DOM L3：DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

2. 事件类型

1. 鼠标事件（鼠标触发）
   • click 鼠标点击
   • mouseenter 鼠标经过
   • mouseleave 鼠标离开
2. 焦点事件（表单获得光标）
   • focus 获得焦点
   • blur 失去焦点
3. 键盘事件（键盘触发）
   • Keydown 键盘按下触发
   • Keyup 键盘抬起触发
4. 文本事件（表单输入触发）
   • input 用户输入

3. 事件对象

3.1 获取事件对象

• 事件对象是什么

  • 也是个对象，这个对象里有事件触发时的相关信息
  • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

• 使用场景

  • 可以判断用户按下哪个键，比如按下回车键可以发布新闻
  • 可以判断鼠标点击了哪个元素，从而做相应的操作

• 语法：如何获取

  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event、ev、e

• 例子：

  元素.addEventListener('click', function(e) {    // e 即事件对象
  }
  

3.2 事件对象常用属性

部分常用属性：

• type
  • 获取当前的事件类型
• clientX/clientY
  • 获取光标相对于浏览器可见窗口左上角的位置
• offsetX/offsetY
  • 获取光标相对于当前DOM元素左上角的位置
• key
  • 用户按下的键盘键的值
  • 现在不提倡使用keyCode

4. 环境对象

• 环境对象：指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境
• 作用：弄清楚this的指向，可以让我们代码更简洁
  • 函数的调用方式不同，this 指代的对象也不同
  • 【谁调用，this 就是谁】 是判断 this 指向的粗略规则
  • 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

5. 回调函数

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

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

• 常见的使用场景：

  function fn() {
      console.log('我是回调函数...')
  }
  // fn 传递给了 setInterval，fn就是回调函数
  setInterval(fn, 1000)
  
  box.addEventListener('click', function() {
      console.log('我也是回调函数...') 
  }

• 回调函数本质还是函数，只不过把它当成参数使用。

• 使用匿名函数做为回调函数比较常见。