WEB APIs (3)

news2025/1/11 12:38:04

事件对象

事件对象有事件触发时的相关信息，如点击事件中事件对象储存了鼠标点在哪个位置的信息

场景：

用户按下了哪个键，按下回车键可以发布新闻

鼠标点击了哪个元素，从而做哪些操作

参数e为事件对象

常用属性

type

获取当前事件类型

clientX/clientY

获取光标相对浏览器可见窗口左上角位置

offsetX/offsetY

获取光标相对当前DOM元素左上角位置

key

用户按下键盘的值

环境对象

能够分析判断函数运行在不同环境中this所指代的对象

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

每个函数里都有this，普通函数里的this指向window

事件所调用的函数this对象指向调用者

回调函数

将函数A作为参数传递给函数B，称函数A为回调函数

fn即为回调函数

表单全选反选案例

选择被勾选的复选框

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

<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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

   <title>~</title>

   <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      table {
         border-collapse: collapse;
         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;
         padding: 10px;
         color: #404060;
      }

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

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

   <script>
      const checkAll = document.querySelector('#checkAll')
      const cks = document.querySelectorAll('.ck')

      checkAll.addEventListener('click', function () {
         for (let i = 0; i < cks.length; i++) {
            cks[i].checked = checkAll.checked
         }
      })

      for (let i = 0; i < cks.length; i++) {
         cks[i].addEventListener('click', function () {
               checkAll.checked = (document.querySelectorAll('.ck:checked').length===cks.length)
         })

      }


   </script>
</body>

</html>