Web API （事件监听）

1.事件

事件：

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

①.事件监听：

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

语法：

 <script>
     // 元素.addEventListener('事件' , 要执行的函数)
    

    // click 鼠标单击
        btn1.addEventListener('click', function () {
            console.log('开始抽奖了');
        })

</script>

②. 事件监听三要素：

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

③. 事件监听版本（了解即可）

④. 事件类型

2.高阶函数

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

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

①. 函数表达式

函数表达式和普通函数并无本质上的区别：

普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用
高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

②. 回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

3.环境对象

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

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

》函数的调用方式不同，this 指代的对象也不同

》 【谁调用， this 就是谁】 是判断 this 指向的粗略规则

》直接调用函数，其实相当于是 window.函数，所以 this 指代 window

语法：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .erweima {
        position: relative;

        width: 160px;
        height: 160px;

        margin: 100px auto;
      }

      span {
        position: absolute;
        left: -20px;
        top: 0;

        display: block;
        width: 20px;
        text-align: center;
        border: 1px solid #ccc;

        /* 鼠标效果 */
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="erweima">
      <img src="images/01.png" alt="" />
      <span class="s1"> X1 </span>
    </div>
    <div class="erweima">
      <img src="images/01.png" alt="" />
      <span class="s1"> X2 </span>
    </div>
    <div class="erweima">
      <img src="images/01.png" alt="" />
      <span class="s1"> X3 </span>
    </div>
    <div class="erweima">
      <img src="images/01.png" alt="" />
      <span class="s1"> X4 </span>
    </div>
    
    <script>
      
      let spans = document.querySelectorAll('span')

       for (let i = 0; i < spans.length; i++) {
           spans[i].addEventListener('click', function () {
               // 单个使用 不好体现this作用
               this.parentNode.style.display = 'none'
           })
           
       }
    </script>
  </body>
</html>

4.字符串长度

类似数组的特性
属性 length 当前字符串的长度
字符串也可以通过下标来访问：（ let i = 'abc' i[1] = b ）
字符串也可以遍历 ( 'abc' 遍历 a b c ( log 一下它们就会一个一个往下排了 ) )

<!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>Document</title>
  <link rel="stylesheet" href="css/weibo.css" />
</head>

<body>
  <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt="" /><br />
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <div class="contentList">
      <ul></ul>
    </div>
  </div>
  <script>
    
    let area = document.querySelector('#area')
    let useCount = document.querySelector('.useCount')

    //  用户输入文字，可以计算用户输入的字数： input 
    area.addEventListener('input', function () {
      
      // console.log(area.value);
      //  属性 length 当前字符串的长度
      useCount.innerHTML = area.value.length
    })
  </script>
</body>

</html>

5.编程思想

①.排他思想

干掉所有人之后使用for 循环
复活他自己通过this 或者下标照照自己或者对应的元素
语法：

<!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>
      /* 
      1 给标题标签 给他们绑定点击事件
      2 事件触发 开始使用排他思想
        1 获取所有的要设置标题样式的标签  遍历他们，移除掉 上边框 红色效果
        2 通过 this  给自己单独添加上 上边框红色的效果 

        3 获取到所有的main标签（决定图片显示）  遍历他们 移除掉 一个class active
        4 再获取到要设置的 main标签 让它 添加上一个class active

      
       */

      let liList = document.querySelectorAll('li');
      let mainList = document.querySelectorAll('.main');

      for (let index = 0; index < liList.length; index++) {
        liList[index].addEventListener('click', function () {
          // 遍历li标签 移除他们身上的类 active
          for (let j = 0; j < liList.length; j++) {
            liList[j].classList.remove('active');
          }
          // 单独对我自己 添加一个类
          this.classList.add('active'); // this = li标签 

          // 处理图片显示部分

          // 先遍历所有的main标签 让他们移除掉 active
          for (let j = 0; j < mainList.length; j++) {
            mainList[j].classList.remove('active');
          }

          // 设置给对应的标签 添加上 active
          // 单独对我自己 添加一个类
          // mainList[index] // index 就是和被点击li标签的下标 
          mainList[index].classList.add('active');
        });
      }
    </script>
  </body>
</html>

web API （事件监听）