老己的JavaScript API笔记2JavaScript API知识笔记第二天一、事件监听（绑定）什么是事件？

JavaScript API知识笔记第二天

一、事件监听（绑定）

什么是事件？

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

1.语法：

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

2.事件监听三要素：

事件源：哪个dom元素被事件触发，使用要先获取dom元素

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

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

eg：

<button class="btn">按钮</button>
  <script>
    const btn=document.querySelector('.btn')
    btn.addEventListener('click',function(){
      alert('click!')
    })
  </script>

京东点击关闭顶部广告

需求：点击关闭之后，顶部关闭

①：点击的是关闭按钮

②：关闭的是父盒子

核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

<body>
  <div class="box">
    广告
    <div class="box1">X</div>
  </div>
  <script>
    const box1 = document.querySelector('.box1')
    const box = document.querySelector('.box')
    box1.addEventListener('click', function () {
      box.style.display = 'none'
    })
  </script>

//css没写上

随机点名案例

① 点击开始按钮随机抽取数组的一个数据，放到页面中

② 点击结束按钮删除数组当前抽取的一个数据

③ 当抽取到最后一个数据的时候，两个按钮同时禁用（写点开始里面，只剩最后一个数据不用抽了）

核心：利用定时器快速展示，停止定时器结束展示

<body>
  <h2>随机点名</h2>
  <div class="box">
    <span>名字是：</span>
    <div class="qs">这里显示姓名</div>
  </div>
  <div class="btns">
    <button class="start">开始</button>
    <button class="end">结束</button>
  </div>
  <script>
    const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
    const start = document.querySelector('.start')
    const end = document.querySelector('.end')
    const qs = document.querySelector('.qs')
    let random = 0
    let n = 0
    start.addEventListener('click', function () {
      n = setInterval(function () {
        random = parseInt(Math.random() * arr.length)
        qs.innerHTML = `${arr[random]}`
      }, 50)
      if (arr.length === 1) {
        start.disabled = 'true'
        end.disabled = 'true'
      }
    })
    end.addEventListener('click', function () {
      clearInterval(n)
      arr.splice(random, 1)
    })
  </script>

二、事件类型

1.鼠标事件

鼠标触发

click——鼠标点击

mouseenter——鼠标经过

mouseleave——鼠标离开

轮播图点击切换

需求：当点击左右的按钮，可以切换轮播图

①：右侧按钮点击，变量++，如果大于等于8，则复原0

②：左侧按钮点击，变量--，如果小于0，则复原最后一张

③：鼠标经过暂停定时器

④：鼠标离开开启定时器

//只展示js部分，后面案例也一样

    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const bac = document.querySelector('.slider-footer')
    let i = 0
    //切换模块函数
    function toggle() {
      img.innerHTML = sliderData[i].url
      p.innerHTML = sliderData[i].title
      bac.style.backgroundColor = sliderData[i].color
      document.querySelector('.active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }
    //定时器
    let n = setInterval(function () {
      i++
      if (i >= 8) {
        i = 0
      }
      toggle()
    }, 1000)
    //左右点击模块
    const prev = document.querySelector('.prev')
    const next = document.querySelector('.next')
    prev.addEventListener('click', function () {
      i--
      if (i < 0) {
        i = 7
      }
      toggle()
    })
    next.addEventListener('click', function () {
      i++
      if (i >= 8) {
        i = 0
      }
      toggle()
    })
    //鼠标经过离开模块
    const all = document.querySelector('.slider')
    all.addEventListener('mouseenter', function () {
      clearInterval(n)
    })
    all.addEventListener('mouseleave', function () {
      clearInterval(n)
      n = setInterval(function () {
        i++
        if (i >= 8) {
          i = 0
        }
        toggle()
      }, 1000)
    })

2.焦点事件

表单获得光标

focus——获得焦点

blur——失去焦点

小米搜索框案例

需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单

①：开始下拉菜单要进行隐藏

②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）

③：表单失去焦点，反向操作

const input = document.querySelector('.mi input')
    const list = document.querySelector('.result-list')
    input.addEventListener('focus', function () {
      list.style.display = 'block'
      input.classList.add('search')
    })
    input.addEventListener('blur', function () {
      list.style.display = 'none'
      input.classList.remove('search')
    })

3.键盘事件

键盘触发

keydown——键盘按下触发

keyup——键盘抬起触发

4.文本事件

表单输入触发

input——用户输入事件

需求：用户输入文字，可以计算用户输入的字数

①：判断用输入事件 input

②：不断取得文本框里面的字符长度, 文本域.value.length

③：把获得数字给下面文本框

const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    tx.addEventListener('input', function () {
      total.innerHTML = `${tx.value.length}/200字`
    })

三、事件对象

1.获取事件对象

语法：

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

//在事件绑定的回调函数的第一个参数就是事件对象，此处的e便是事件对象

2.部分常用属性（虽然我到现在几乎没用到过）

type：获取当前事件类型

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

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

key：用户按下的键盘键的值，现在不提倡使用keyCode

需求：按下回车键盘，可以发布信息

①：用到按下键盘事件 keydown 或者 keyup 都可以

②：如果用户按下的是回车键盘，则发布信息

③：让留言信息模块显示，把拿到的数据渲染到对应标签内部

const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    tx.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        if (tx.value.trim() !== '') {
          item.style.display = 'block'
          text.innerHTML = `${tx.value}`
        }
        tx.value = ''
        total.innerHTML = '0/200字'
      }
    })

四、环境对象（后面还会提到）

1.环境对象

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

2.作用

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

五、回调函数

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

最好的理解就是：外面设置了一个函数（在定时器里设置也一样），然后在定时器里面调用到，设置的事件后就执行那个函数，我就是这么理解的

老己的JavaScript API笔记2

JavaScript API知识笔记 第二天