【JavaScript】Web API基础（二）

目录

事件监听

什么是事件

什么是事件监听

事件监听三要素

事件监听版本

事件类型

鼠标事件

焦点事件

键盘事件

文本事件

事件对象

什么是事件对象

事件对象部分常用属性

环境对象

什么是环境对象

环境对象的作用

回调函数

什么是回调函数

---

事件监听

什么是事件 事件是在编程时系统内发生的动作或则发生的事情比如用户在网页单击一个按钮 什么是事件监听 让程序检测是否有事件产生，一旦有事件触发，就立刻调用一个函数做出相应，也成为绑定事件或者注册事件比如鼠标经过显示下拉菜单，比如可以点击播放轮播图等

语法

 // 示例


 我是广告,有本事就把我关掉
    X
  
  点我一下

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

  /*  
    dom L0
    事件源.on事件 = function(){}
    dom L2
    事件源.addEventListener(事件,事件处理函数)
    区别：
    on方式会覆盖，addEventListener方式可绑定多次，拥有事件更多特性
    */
  btn.onclick = function () {
    alert(111)
  }
  btn.onclick = function () {
    alert(222)
  }
  // 222
  btn.addEventListener('click', function () {
    alert('你点我了哟~')
  })
  btn.addEventListener('click', function () {
    alert('你点我了哟2~')
  })
  // 你点我了哟~  你点我了哟2~

事件类型

鼠标事件 click 鼠标点击

 // 上一张
  prev.addEventListener('click', function () {
    i--
    if (i < 0) {
      i = arr.length - 1
    }
    start()
  })

mouseenter 鼠标经过

 box.addEventListener('mouseenter', function () {
    // 停止定时器
    clearInterval(stop)
  })

mouseleave 鼠标离开

  box.addEventListener('mouseleave', function () {
    // 停止定时器 防止离开次数越多轮播效果越快
    clearInterval(stop)
    // 开启定时器
    stop = setInterval(function () {
      next.click()
    }, 1000)
  })

焦点事件 focus 获得焦点

 // 文本域 获得焦点 显示输入字数样式
tx.addEventListener('focus', function () {
      tx.style.border = '1px solid #00aeec'
      total.style.opacity = 1
    })

blur 失去焦点

  // 文本域 失去焦点 隐藏输入字数样式
tx.addEventListener('blur', function () {
      tx.style.border = '0px'
      total.style.opacity = 0
    })

键盘事件 keydown 键盘按下触发

 addEventListener('keydown', function () {
      console.log(111);
    })

keyup 键盘抬起触发

 addEventListener('keyup', function () {
      console.log(111);
    })

文本事件 input 文本输入事件

    // 输入事件
    tx.addEventListener('input', function () {
      total.innerHTML = `${tx.value.length}/200字`
      // console.log(tx.value.length);
    })

 

 

事件对象

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

使用场景

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

语法：如何获取

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

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

事件对象部分常用属性

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

去除字符串左右空格

        

tx.value.trim()

环境对象

什么是环境对象

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

环境对象的作用 函数的调用方式不同，this指代的对象也不同【谁调用，this就是谁】 是判断this指向的粗略规则直接调用函数，其实相当于是window.函数，所以this指代window

  点击
  

回调函数

什么是回调函数

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

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

常见的使用场景：

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

box.addEventLinstener('click',function () {
   console.log('我也是回调函数')
})