02-事件事件监听（注册事件），事件类型（鼠标事件，键盘事件，HTML事件），搜索框案例，评论案例，购物车加减操作案例，

什么是事件？

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

什么是事件监听？

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

语法：

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

事件监听三要素：

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

事件监听：

<button>点我</button>
    <script>
        // 获取元素
        let btn = document.querySelector('button')
        // 事件监听（注册事件）
        btn.addEventListener('click',function(){
            alert('被点击了')
        })
    </script>

注意：

事件类型要加引号

函数是点击之后再去执行，每次点击都会执行一次

案例：点击按钮关闭二维码

<div class="erweima">
        <img src="./images/code.png" alt="">
        <i class="close_btn">x</i>
</div>
    <script>
        // 1. 获取元素   事件源 i   关闭的 erweima 
        let close_btn = document.querySelector('.close_btn')
        let erweima = document.querySelector('.erweima')
        // 2. 事件监听
        close_btn.addEventListener('click', function () {
        // erweima 关闭  他是隐藏的
        erweima.style.display = 'none'
        })
    </script>

案例：随机点名

<div>开始抽奖吧</div>
<button>点击点名</button>
    
    <script>
        // 1. 获取元素  div 和 button 
        let box = document.querySelector('div')
        let btn = document.querySelector('button')
        // 2. 随机函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['刘备', '曹操', '关羽']
        // 3. 事件监听
        btn.addEventListener('click', function () {
            // 随机的数字
            let random = getRandom(0, arr.length - 1)
            // console.log(arr[random])
            box.innerHTML = arr[random]
            // 删除数组里面的元素  splice(从哪里删, 删几个)
            arr.splice(random, 1)
            // 如果数组没有了 长度为0，就要禁用按钮
            if (arr.length === 0) {
                // console.log('最后一个了')
                btn.disabled = true
                btn.innerHTML = '已经抽完'
            }
        })
    </script>

事件监听版本

DOM L0

事件源.on事件 = function() { }

DOM L2

事件源.addEventListener(事件，事件处理函数)

发展史：

DOM L0 ：是 DOM 的发展的第一个版本； L：level

DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准

DOM L2：使用addEventListener注册事件

DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

事件类型

鼠标事件

click	单击鼠标按钮时触发
dblclick	当用户双击主鼠标按钮时触发
mousedown	当用户按下鼠标还未弹起时触发
mouseup	当用户释放鼠标按钮时触发
mouseover	当鼠标移到某个元素上方时触发
mouseout	当鼠标移出某个元素上方时触发
mousemove	当鼠标指针在元素上移动时触发
mouseenter	在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡 ★
mouseleave	鼠标移出，不参与冒泡 ★

键盘事件

keydown	当用户按下键盘上任意键时触发，如果按住不放，会重复触发
keyup	当用户释放键盘上的键触发
keypress	当用户按下键盘上的字符键时触发，如果按住不放，会重复触发

HTMl事件

load	当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发
unload	当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发
select	当用户选择文本框（input或textarea）中的一个或多个字符触发
change	当文本框（input或textarea）内容改变且失去焦点后触发
input	输入
focus	当页面或者元素获得焦点时在window及相关元素上面触发
blur	当页面或元素失去焦点时在window及相关元素上触发
submit	当用户点击提交按钮在元素上触发
reset	当用户点击重置按钮在元素上触发
resize	当窗口或框架的大小变化时在window或框架上触发
scroll	当用户滚动带滚动条的元素时触发

小米搜索框案例

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

CSS

<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        ul {
            list-style: none;
        }
        .mi {
            width: 223px;
            margin: 100px auto;
        }
        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
            transition: all .3s;
        }
        .mi .search {
            border: 1px solid #ff6700;
        }
        .list {
            display: none;
            width: 223px;
            border: 1px solid #ff6700;
        }
        .list a {
            display: block;
            padding: 6px 15px;
            text-decoration: none;
            font-size: 12px;
            color: #424242;
        }
        .list a:hover {
            background-color: #eee;
        }
</style>

HTML

<div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
</div>

javascript

<script>
        // 获取元素
        let search = document.querySelector('input')
        let list = document.querySelector('.list')
        // 事件监听 获得光标事件  focus
        search.addEventListener('focus', function() {
            // 显示下拉菜单
            list.style.display = 'block'
            // 文本框变色
            search.classList.add('search')
        })
        // 事件监听 失去光标事件  blur
        search.addEventListener('blur', function() {
            // 隐藏下拉菜单
            list.style.display = 'none'
            // 文本框去色
            search.classList.remove('search')
        })
</script>

评论案例

CSS

<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        textarea {
            width: 500px;
            height: 100px;
            border-radius: 10px;
            padding: 10px 10px;
            resize: none;
            outline: none;
        }
        .pinlun {
            width: 500px;
            margin: 100px auto;
        }
        button {
            width: 50px;
            height: 30px;
            outline: none;
            background-color: rgb(37, 161, 103);
            color: rgb(255, 255, 255);
            border: 1px solid rgb(255, 255, 255);
            border-radius: 5px;
            cursor: pointer;
        }
        .pinlun div {
            float: right;
        }
</style>

HTML

<div class="pinlun">
        <textarea  placeholder="评论千万条，友善第一条" id="area" cols="30" rows="10" maxlength="200"></textarea>
        <div>
            <span class="count">0</span>
            <span>/</span>
            <span>200</span>
            <button>发布</button>
        </div>
</div>

JavaScript

<script>
        // 获取元素
        let area = document.querySelector('#area')
        let count = document.querySelector('.count')
        // 绑定事件  用户输入事件 input
        area.addEventListener('input', function() {
            //area.value.length 得到输入字符的长度
            count.innerHTML = area.value.length
        })
</script>

全选文本框案例

CSS

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      /* 边框会合并为一个单一的边框 */
      border-collapse: collapse;
      /* 表格的边框间距 */
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      /* 字体加粗  字体大小  字体样式 */
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>

HTML

<table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>

javascript

<script>
    // 1. 获取元素  全选 和   ck 小复选框
    let all = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let span = document.querySelector('span')
    // 2. 事件监听   全选按钮  
    all.addEventListener('click', function () {
      // console.log(all.checked)  // true  false 
      // 我们需要做的就是把 all.checked 给下面三个小按钮
      // 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = all.checked
      }
      // 当我们的全选按钮处于选中状态，则可以改为取消
      if (all.checked) {
        // console.log('要改')
        span.innerHTML = '取消'
      } else {
        span.innerHTML = '全选'
      }
    })


    // 3. 小按钮的做法 同时给多个元素绑定相同事件
    for (let i = 0; i < cks.length; i++) {
      // 绑定事件
      cks[i].addEventListener('click', function () {
        // console.log(11)
        // 只要点击任何一个小按钮，都要遍历所有的小按钮  
        for (let j = 0; j < cks.length; j++) {
          // 都来看看是不是有人没有选中
          if (cks[j].checked === false) {
            // 如果有false 则退出循环 结束函数
            all.checked = false
            span.innerHTML = '全选'
            return
          }
        }
        // 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中
        all.checked = true
        span.innerHTML = '取消'
      })
    }

</script>

购物车加减操作

需求：用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号

CSS

 <style>
    div {
      width: 80px;
    }

    input[type=text] {
      width: 50px;
      height: 44px;
      outline: none;
      border: 1px solid #ccc;
      text-align: center;
      border-right: 0;
    }

    input[type=button] {
      height: 24px;
      width: 22px;
      cursor: pointer;
    }

    input {
      float: left;
      border: 1px solid #ccc;

    }
  </style>

HTML

<div>
        <input type="text" id="total" value="1" readonly>
        <input type="button" value="+" id="add">
        <input type="button" value="-" id="reduce" disabled>
</div>

JavaScript

<script>
      // 1. 获取元素  三个
      let total = document.querySelector('#total')
      let add = document.querySelector('#add')
      let reduce = document.querySelector('#reduce')
      // 2. 点击加号 事件侦听  
      add.addEventListener('click', function () {
        // console.log(typeof total.value)
        // total.value = total.value + 1
        // i++   隐式转换
        // i = i + 1 
        total.value++
        reduce.disabled = false
      })
      // 3. 点击减号 事件侦听  
      reduce.addEventListener('click', function () {

        total.value--
        if (total.value <= 1) {
          reduce.disabled = true
        }
      })

      // 2 === '2'
</script>

点击按钮切换图片