一.事件

1.事件监听

1.1事件监听三要素：

1.2点击关闭二维码

1.3随机点名

 <p>这里显示名字</p>
  <button>随机点名</button>

  <script>
    let names = [
      '马超',
      '李白',
      '韩信',
      '露娜',
      '西施',
      '艾琳',
      '赵云'
    ]
    let p = document.querySelector('p')
    let btn = document.querySelector('button')

    // 为按钮绑定单击事件
    btn.addEventListener('click', function () {
      //生成随机数--每次单击要生成一个新的随机数
      let index = parseInt(Math.random() * names.length)
      // 获取名字，为p元素设置内容
      p.innerHTML = names[index]
      // 删除刚刚的姓名
      names.splice(index, 1)
      //判断姓名是否都选择完毕
      if (names.length == 0) {
        btn.disabled = true
      }
    })
  </script>

1.4随机点名-进阶版

<p>这里显示名字</p>
  <button class="start">开始随机点名</button>
  <button class="end">结束随机点名</button>

  <script>
    let names = [
      '马超',
      '李白',
      '韩信',
      '露娜',
      '西施',
      '艾琳',
      '赵云'
    ]

    let start = document.querySelector('.start')
    let end = document.querySelector('.end')
    let p = document.querySelector('p')
    let timeId, index

    // 添加随机点名的效果
    start.addEventListener('click', function () {
      timeId = setInterval(function () {
        index = parseInt(Math.random() * names.length)
        p.innerHTML = names[index]
      }, 100)
    })

    //结束本次点名
    end.addEventListener('click', function () {
      // 停止定时器
      clearInterval(timeId)
      // 删除指定的姓名
      names.splice(index, 1)
      // 判断是否需要禁用按钮
      if (names.length == 0) {
        start.disabled = true
        end.disabled = true
      }
      console.log(names);
    })
  </script>

二.事件类型

都很重要！！！

2.1小米搜索框

2.2微博发布案例

2.3全选反选案例 3例

公共样式

三.高阶函数

3.1函数表达式

3.2回调函数

四.环境对象

五.编程思想

5.1排他思想

<ul class="list">
      <li class="active">首页</li>
      <li>文章列表</li>
      <li>发表文章</li>
      <li>关于我们</li>
    </ul>

    <script>
      // 需求：
      // 1.单击li元素，在事件处理函数中
      // 1.1.找到当前有active样式的li元素，清除这个li元素的active样式
      // 1.2 为当前被单击的li元素添加active

      let lis = document.querySelectorAll('li')
      // 遍历，为每一个li元素绑定事件
      lis.forEach(function(ele) {
        ele.addEventListener('click', function() {
          // 找到当前有active样式的li元素，清除这个li元素的active样式
          // li.active:要求找到li元素，同时li元素有active样式 -- 交集选择器
          document.querySelector('.list > li.active').classList.remove('active')

          // 为当前被单击的li元素添加active
          ele.classList.add('active')
        })
      })
    </script>