0207 事件

news2024/11/28 8:35:53

事件监听

事件监听版本

事件类型

事件

概念

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

例子

点击按钮

鼠标经过

拖拽鼠标

事件监听（注册事件，绑定事件）

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

语法

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

事件监听三要素

事件源：哪个DOM元素被事件触发了，要获取DOM元素

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

事件调用什么函数：要做什么

代码

    <button>点击我</button>
    <div>经过我</div>
    <script>
      //1获取按钮元素
      let btn = document.querySelector("button")
      //2事件源
      btn.addEventListener("click", function () {
        alert("努力学习啊啊啊啊啊啊啊啊")
      })
      let box=document.querySelector('div')
      box.addEventListener("mouseover", function () {
        alert("努力挣钱啊啊啊啊啊啊啊啊")
      })
    </script>

例子关闭二维码

二维码旁边有一个关闭按钮，点击然后关闭二维码

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

      .erweima {
        position: relative;
        width: 160px;
        height: 160px;
        margin: 100px auto;
        border: 1px solid #ccc;
      }

      .erweima i {
        position: absolute;
        left: -13px;
        top: 0;
        width: 10px;
        height: 10px;
        border: 1px solid #ccc;
        font-size: 12px;
        line-height: 10px;
        color: #ccc;
        font-style: normal;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <i class="close_btn">x</i>
    </div>
    <script>
      //1获取元素
      let btn = document.querySelector(".close_btn")
      let code = document.querySelector(".erweima")
      //2事件监听
      btn.addEventListener("click", function () {
        code.style.display = "none"
      })
    </script>
  </body>

例子随机点名

    <style>
      div {
        width: 200px;
        height: 40px;
        border: 2px solid brown;
        text-align: center;
        line-height: 40px;
      }
      button {
        margin-left: 65px;
      }

    </style>
  </head>
  <body>
    <div></div>
    <button>click this</button>
    <script>
      let box = document.querySelector("div")
      let btn = document.querySelector("button")

      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      let arr = ["张三", "李四", "王五", "王朝", "马汉"]

      btn.addEventListener('click', function () {
        let random = getRandom(0, arr.length - 1)
        box.innerHTML = arr[random]
      })
    </script>
  </body>

例子随机点名完善

    <style>
      div {
        width: 200px;
        height: 40px;
        border: 5px solid brown;
        text-align: center;
        line-height: 40px;
      }
      button {
        margin-left: 65px;
      }
    </style>
  </head>
  <body>
    <div>点击下面按钮开始抽人</div>
    <button>click this</button>
    <script>
      let box = document.querySelector("div")
      let btn = document.querySelector("button")

      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      let arr = ["张三", "李四", "王五", "王朝", "马汉"]

      btn.addEventListener("click", function () {
        let random = getRandom(0, arr.length - 1)
        box.innerHTML = arr[random]

        //抽过的就删除
        arr.splice(random, 1)
        //抽完按钮就禁用，数组最后一个就禁用
        if (arr.length === 0) {
          btn.disabled = true
          btn.innerHTML='所有人都已经抽过了'
        }
      })
    </script>
  </body>

事件类型

鼠标事件

鼠标触发

click 鼠标点击

mouseover鼠标经过

mouseleave鼠标离开

焦点事件

表单获得光标

focus获得焦点

blur失去焦点

键盘事件

键盘触发

KeyDown键盘按下触发

keyup键盘抬起触发

文本事件

表单输入触发

input用户输入事件

例子小米搜索框

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      .mi {
        position: relative;
        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;
      }

      .mi .search {
        border: 5px solid #ff6700;
      }

      .result-list {
        display: none;
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
      }

      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }

      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" />
      <ul class="result-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>
    <script>
        //1获取元素input
      let search = document.querySelector("input")
      //2获取元素.result-list
      let list = document.querySelector(".result-list")
      //3事件监听，获得光标事件
      search.addEventListener("focus", function () {
        //显示下拉菜单
        list.style.display = "block"
        //文本框变色
        search.classList.add("search")
      })
    </script>
  </body>

例子输入文字，计算用户输入的字数

  <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>
      //1获取元素文本域area
      let area = document.querySelector("#area")
      //2获取字符长度usecount
      let useCount = document.querySelector(".useCount")
      //3监听绑定事件，用户输入的input
      area.addEventListener("input", function () {
        useCount.innerHTML = area.value.length
      })
    </script>
  </body>

例子全选文本

    <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>
  </head>

  <body>
    <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>
    <script>
      //
      let all = document.querySelector("#checkAll")
      //
      let cks = document.querySelectorAll(".ck")
      //
      let span = document.querySelector("span")
      //点全选按钮，下面的小按钮都选上
      all.addEventListener("click", function () {
        for (let i = 0; i < cks.length; i++) {
          cks[i].checked = all.checked
        }
        //如果点击全选了，全选文字就变成取消，没有点击就是全选
        if (all.checked === true) {
          span.innerHTML = "取消"
        } else {
          span.innerHTML = "全选"
        }
      })

      //点击下面小按钮，全选按钮被选
      for (let i = 0; i < cks.length; i++) {
        cks[i].addEventListener("click", function () {
          for (let j = 0; j < cks.length; j++) {
            if (cks[j].checked === false) {
              all.checked === false
              return
            }
          }
          //
          all.checked = true
        })
      }
    </script>
  </body>

例子购物车加减操作

  <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>
</head>

<body>
  <div>
    <input type="text" id="total" value="1" readonly>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="reduce" disabled>
    <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
        }
      })
    </script>
  </div>
</body