web api-第二天文档-事件监听-高阶函数-回调函数-环境变量.md事件 1. 事件监听什么是事件？什么是事件监

事件

1. 事件监听

什么是事件？

事件是编程时系统内发生的动作或者发生的事情

比如用户在网页上点击一个按钮

什么是事件监听

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

语法

元素.addEventListener('事件',//要执行的函数function(){})

事件监听

例如:

//1. 获取元素
let btn = document.querySelector('button')
//2. 事件监听
btn.addEventListener('click',function(){
    alert('被点击了')
})
//注意:
//1. 事件类型要加引号
//2. 函数是点击之后再去执行，每次点击都会执行一次

事件监听三要素

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

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

事件处理处理程序要做什么事

事件类型

鼠标事件

鼠标触发

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

焦点事件

表单获得光标

focus 获得焦点

blue 失去焦点

键盘事件

键盘触发

Keydown 键盘按下触发

Keyup 键盘抬起触发

文本事件

表单输入触发

input 用户输入事件

高阶函数

1.函数表达式

let counter = function(x,y){
    return x+y
}
//调用函数
let result = counter(5,10)
console.log(result)

普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用

高阶函数 可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。

【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

回调函数

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

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

常见使用场景

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

环境变量

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

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

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

案例

tab切换

需求：点击不同的选项卡，底部可以显示不同的内容

分析：

①：点击当前选项卡，当前添加类，其余的兄弟移除类，排他思想

②：下面模块盒子全部隐藏，当前的模块显示


<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }

    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }

    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }

    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }

    .products .main {
      float: left;
      display: none;
    }

    .products .main.active {
      display: block;
    }

    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
      <div class="main active">
        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>

  <script>
    let lis = document.querySelectorAll('.tab >  li ')
    let mains = document.querySelectorAll('.products > .main')
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        //1.导航项处理
        //先清除 当前有active样式的li元素
        document.querySelector('.tab > li.active').classList.remove('active')
        //为当前点击的元素添加active
        this.classList.add('active')

        //2.内容面板处理
        //清除当前有active样式的div
        document.querySelector('.products > div.main').classList.remove('active')
        //让当前与导航项对应索引位置的内容面板 添加active样式
        mains[i].classList.add('active')
      })


    }


  </script>
</body>

</html>

随机点名案例

分析：

①：点击的是按钮

②：随机抽取一个名字

③：当名字抽取完毕，则利用 disabled 设置为 true

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>05-随机点名-进阶版</title>
  <style>
    p {
      margin: 0 auto;
      margin-top: 100px;
      font-size: 30px;
      width: 400px;
      height: 200px;
      border: 2px solid red;
      text-align: center;
      line-height: 200px;
    }

    div {
      width: 400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      background: url();
    }

    button {
      margin-top: 20px;
      width: 100px;
      height: 40px;
    }
  </style>
</head>

<body>
  <p>这里显示中奖幸运儿</p>
  <div>
    <button class="start">开始随机点名</button>
    <button class="end">结束随机点名</button>
  </div>

  <script>
    let p = document.querySelector('p')
    let start = document.querySelector('button:nth-of-type(1)')
    let end = document.querySelector('button:nth-of-type(2)')
    // console.log(start);

    let names = [
      `曹辰俊`,
      `邓天诚`,
      `曾文旭`,
      `曾梓瑞`,
      `陈雅欣`,
    ]
    console.log(names)
    let timeId, index
    //开始按钮
    start.addEventListener('click', function () {
      start.disabled = true
      clearInterval(timeId)
      timeId = setInterval(function () {
        //定义随机数
        index = parseInt(Math.random() * names.length)
        //赋值
        p.innerText = names[index]

      }, 10)
    })
    //结束按钮
    end.addEventListener('click', function () {
      start.disabled = false
      clearInterval(timeId)
    })
  </script>
</body>

</html>