Dom 事件基础

• 1.事件
• • 1.1事件监听
  • 1.2事件类型
  • 1.3事件处理程序
  • 2.事件类型
  • • 2.1鼠标事件
    • 2.2键盘事件
    • 2.3焦点事件
    • 2.4文本框输入事件
    • 3.事件对象
    • 4.环境对象
    • 5.回调函数

      1.事件

      事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

      例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

      1.1事件监听

      结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

      addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

       
          
          
            
            
            
          
          
            
      事件监听
            
      为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。
            点击改变文字颜色
            
          
          
      

      **

      完成事件监听分成3个步骤：

      **

      1. 获取 DOM 元素
      2. 通过 addEventListener 方法为 DOM 节点添加事件监听
      3. 等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
      4. 事件触发后，相对应的回调函数会被执行

      1.2事件类型

      click 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】dblclick

      结论：【事件类型】决定了事件被触发的方式，如 click 代表鼠标单击，dblclick 代表鼠标双击。

      1.3事件处理程序

      addEventListener 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。

      结论：【事件处理程序】决定了事件触发后应该执行的逻辑。

      2.事件类型

      将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。

      2.1鼠标事件

      鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。

      1. mouseenter 监听鼠标是否移入 DOM 元素

      
        
      鼠标事件
        
      监听与鼠标相关的操作
        
      
        
      
        
      
      

      2. `mouseleave 监听鼠标是否移出 DOM 元素

       
            
      鼠标事件
            
      监听与鼠标相关的操作
            
      
            
      
            
          
      

      2.2键盘事件

      keydown 键盘按下触发

      keyup 键盘抬起触发

      // 按下回车发布评论
          tx.addEventListener('keyup', function (e) {
            // 只有按下的是回车键，才会触发
            // console.log(e.key)
            if (e.key === 'Enter') {
              // 如果用户输入的不为空就显示和打印
              if (tx.value.trim()) {
                // console.log(11)
                item.style.display = 'block'
                // console.log(tx.value)  // 用户输入的内容
                text.innerHTML = tx.value
              }
              // 等我们按下回车，结束，清空文本域
              tx.value = ''
              // 按下回车之后，就要把 字符统计 复原
              total.innerHTML = '0/200字'
            }
      

      2.3焦点事件

      focus 获得焦点

      blur 失去焦点

      2.4文本框输入事件

      input

      //  检测用户输入
          tx.addEventListener('input', function () {
            // console.log(tx.value.length)  得到输入的长度
            total.innerHTML = `${tx.value.length}/200字`
          })
      

      3.事件对象

      任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

        
            
      事件对象
            
      任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
            
      
            
      
            
          
      

      事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。

      接下来简单看一下事件对象中包含了哪些有用的信息：

      1. ev.type 当前事件的类型
      2. ev.clientX/Y 光标相对浏览器窗口的位置
      3. ev.offsetX/Y 光标相于当前 DOM 元素的位置
      4. key 用户按下的键盘键值

      注：在事件回调函数内部通过 window.event 同样可以获取事件对象。

      4.环境对象

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

      结论：

      1. this 本质上是一个变量，数据类型为对象
      2. 函数的调用方式不同 this 变量的值也不同
      3. 【谁调用 this 就是谁】是判断 this 值的粗略规则
      4. 函数直接调用时实际上 window.sayHi() 所以 this 的值为 window

      5.回调函数

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

      函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了！！！

      我们回顾一下间歇函数 setInterval

      fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。

      结论：

      1. 回调函数本质还是函数，只不过把它当成参数使用
      2. 使用匿名函数做为回调函数比较常见