From 2a526b97c2c3a4598e75f1dce2f362e99a0e79dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E9=97=BB=E7=A5=A5?= <18396581747@163.com>
Date: Sun, 19 Nov 2023 16:56:48 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 周闻祥 <18396581747@163.com>
---
 ...73\346\255\242\351\273\230\350\256\244.md" | 419 ++++++++++++++++++
 1 file changed, 419 insertions(+)
 create mode 100644 "21 \345\221\250\351\227\273\347\245\245/20231114\344\272\213\344\273\266\346\265\201\357\274\214\345\247\224\346\211\230\357\274\214\351\230\273\346\255\242\351\273\230\350\256\244.md"
diff --git "a/21 \345\221\250\351\227\273\347\245\245/20231114\344\272\213\344\273\266\346\265\201\357\274\214\345\247\224\346\211\230\357\274\214\351\230\273\346\255\242\351\273\230\350\256\244.md" "b/21 \345\221\250\351\227\273\347\245\245/20231114\344\272\213\344\273\266\346\265\201\357\274\214\345\247\224\346\211\230\357\274\214\351\230\273\346\255\242\351\273\230\350\256\244.md"
new file mode 100644
index 0000000..ebca19a
--- /dev/null
+++ "b/21 \345\221\250\351\227\273\347\245\245/20231114\344\272\213\344\273\266\346\265\201\357\274\214\345\247\224\346\211\230\357\274\214\351\230\273\346\255\242\351\273\230\350\256\244.md"	
@@ -0,0 +1,419 @@
+# 笔记
+
+### 事件流
+
+事件流是对时间执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。
+
+任意事件被触发时总会经历两个阶段：
+
+【捕获阶段】：是【从父到子】的传导过程，
+
+【冒泡阶段】：是【从子向父】的传导过程。
+
+### 事件解绑
+
+需有方法名
+
+### 鼠标经过事件：
+
+   mouseover 和 mouseout 会有冒泡效果
+
+   mouseenter  和 mouseleave  没有冒泡效果 (推荐)
+
+### 事件委托
+
+```javascript
+// 以事件委托的形式实现
+    // 点击每个小li 当前li 文字变为红色
+    // 1.获取li的父元素
+    const ul = document.querySelector('ul');
+    // 2.给ul添加点击事件
+    ul.addEventListener('click',function(e){
+      // 3.使用事件对象 e.target.tagName 代表被
+      // console.log(e.target); // 被点击的对象的目标
+      // console.dir(e.target); // 被点击的对象的目标的标签名称
+      /*
+      e 事件对象
+      e.target 事件对象的点击目标
+      e.target.tagName 目标的标签名称
+      */ 
+      if(e.target.tagName === 'LI'){
+        //this. 此时这里this是ul所以不能用this
+        e.target.style.color = 'red'
+      }
+
+      if(e.target.tagName === 'P'){
+        //this. 此时这里this是ul所以不能用this
+        e.target.style.color = 'blue'
+      }
+    })
+```
+
+### 阻止默认行为
+
+```javascript
+  e.preventDefault(); //阻止对象的默认行为
+
+  e.stopPropagation(); //阻止冒泡行为
+```
+
+
+
+# 作业
+
+### 全选按钮案例
+
+```html
+<!DOCTYPE html>
+
+<html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>全选课后练习</title>
+  <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;
+    }
+     /* input:checked{
+      width: 100px;
+      height: 100px;
+      border: 2px red solid;
+    }  */
+    /* 选择被勾选的复选框 */
+    .ck:checked {
+      width: 20px;
+      height: 20px;
+    }
+  </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>
+    //全选框
+    const all = document.querySelector('#checkAll');
+    //小复选框
+    const small = document.querySelectorAll('.ck'); //伪数组
+
+    //给全选框，添加点击事件
+    all.addEventListener('click',function(){
+        //先看一下全选框的状态
+        console.log(this.checked); //ture or false
+        //遍历小的复选框，将每个小复选框的状态，改成和all的状态一致
+        for(let i = 0; i < small.length; i++){
+            small[i].checked = this.checked;
+        }
+    })
+
+    //给小复选框添加点击事件，并且判断选中的小框的总个数是不是等于小复选框的总个数
+    for(let i = 0; i < small.length; i++){
+        small[i].addEventListener('click',function(){
+            // document.querySelectorAll('.ck:checked').length //被选中的小的复选框的个数
+            // small.length // 总的小复选框的个数
+            all.checked = document.querySelectorAll('.ck:checked').length == small.length //ture or false
+            
+
+        })
+    }
+  </script>
+</body>
+
+</html>
+```
+
+### 事件委托
+
+```HTML
+<!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">
+  <title>Document</title>
+</head>
+
+<body>
+  <ul>
+    <li>第1个孩子</li>
+    <li>第2个孩子</li>
+    <li>第3个孩子</li>
+    <li>第4个孩子</li>
+    <li>第5个孩子</li>
+    <p>我需要蓝色</p>
+    <span>我不需要变色</span>
+  </ul>
+  <script>
+    //获取所有li
+    const lis = document.querySelectorAll('li');
+    // 遍历lis,给每个li元素添加一个点击事件
+    // for(let i = 0; i <lis.length; i++){
+    //   lis[i].addEventListener('click',function(){
+    //     this.style.color = 'red'
+    //   })
+    // }
+
+    // 思考如果li有10000个,批量添加事件,效率低下
+
+    // 以事件委托的形式实现
+    // 点击每个小li 当前li 文字变为红色
+    // 1.获取li的父元素
+    const ul = document.querySelector('ul');
+    // 2.给ul添加点击事件
+    ul.addEventListener('click',function(e){
+      // 3.使用事件对象 e.target.tagName 代表被
+      // console.log(e.target); // 被点击的对象的目标
+      // console.dir(e.target); // 被点击的对象的目标的标签名称
+      /*
+      e 事件对象
+      e.target 事件对象的点击目标
+      e.target.tagName 目标的标签名称
+      */ 
+      if(e.target.tagName === 'LI'){
+        //this. 此时这里this是ul所以不能用this
+        e.target.style.color = 'red'
+      }
+
+      if(e.target.tagName === 'P'){
+        //this. 此时这里this是ul所以不能用this
+        e.target.style.color = 'blue'
+      }
+    })
+  
+  </script>
+</body>
+
+</html>
+```
+
+
+
+### tab栏切换
+
+事件委托形式
+
+```html
+<!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" />
+  <title>tab栏切换</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .tab {
+      width: 590px;
+      height: 340px;
+      margin: 20px;
+      border: 1px solid #e4e4e4;
+    }
+
+    .tab-nav {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .tab-nav h3 {
+      font-size: 24px;
+      font-weight: normal;
+      margin-left: 20px;
+    }
+
+    .tab-nav ul {
+      list-style: none;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .tab-nav ul li {
+      margin: 0 20px;
+      font-size: 14px;
+    }
+
+    .tab-nav ul li a {
+      text-decoration: none;
+      border-bottom: 2px solid transparent;
+      color: #333;
+    }
+
+    .tab-nav ul li a.active {
+      border-color: #e1251b;
+      color: #e1251b;
+    }
+
+    .tab-content {
+      padding: 0 16px;
+    }
+
+    .tab-content .item {
+      display: none;
+    }
+
+    .tab-content .item.active {
+      display: block;
+    }
+  </style>
+</head>
+<!-- 
+  服务器买,域名,买.域名要备案得到ICP 运动会三天,把事件搞定
+ -->
+<body>
+  <div class="tab">
+    <div class="tab-nav">
+      <h3>每日特价</h3>
+      <ul>
+        <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
+        <li><a href="javascript:;" data-id="1">美食</a></li>
+        <li><a href="javascript:;" data-id="2">百货</a></li>
+        <li><a href="javascript:;" data-id="3">个护</a></li>
+        <li><a href="javascript:;" data-id="4">预告</a></li>
+      </ul>
+    </div>
+    <div class="tab-content">
+      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
+      <div class="item"><img src="./images/tab01.png" alt="" /></div>
+      <div class="item"><img src="./images/tab02.png" alt="" /></div>
+      <div class="item"><img src="./images/tab03.png" alt="" /></div>
+      <div class="item"><img src="./images/tab04.png" alt="" /></div>
+    </div>
+  </div>
+  <script>
+    // 采取事件委托的形式 tab栏切换
+    // 获取ul
+    const ul = document.querySelector('ul');
+    // 获取全部图片
+    const imgs = document.querySelectorAll('.item')
+    // 添加事件
+    ul.addEventListener('mouseover',function(e){
+      // console.log(e.target.tagName);
+      if(e.target.tagName==='A'){
+        // 将其它A标签的红色去掉active
+        document.querySelector('li .active').classList.remove('active')
+        // 给当前A标签加上active
+        // this. 采取事件委托时this是指父元素
+        e.target.classList.add('active')
+
+        // 先去掉默认的active效果
+        document.querySelector('.tab-content .active').classList.remove('active');
+        // 给正确的图片加上active
+        // 通过自定义属性，先获得id
+        let i = e.target.dataset.id;
+        // 通过i去imgs去匹配
+         imgs[i].classList.add('active');
+
+      }
+    })
+  </script>
+</body>
+
+</html>
+```
+
+### 阻止默认行为
+
+```HTML
+<!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">
+  <title>Document</title>
+</head>
+
+<body>
+  <form action="http://www.baidu.com">
+    <input type="submit" value="免费注册">
+  </form>
+  <a href="http://www.baidu.com">百度一下</a>
+ 
+</body>
+
+<script>
+  // 阻止上面两个对象的默认行为， 默认行为，就是指标签原有动作行为
+  let a = document.querySelector('a');
+  a.addEventListener('click',function(e){
+    alert(666)
+    //有这么一个需要，只弹出666，但不能跳转到百度链接
+    // 1.添加事件对象
+    // 2.该事件对象有个方法，叫preventDefault()
+    e.preventDefault(); //阻止对象的默认行为
+    e.stopPropagation(); //阻止冒泡行为
+  })
+
+</script>
+
+</html>
+```
\ No newline at end of file
-- 
Gitee


+ 全选 +	商品	商家	价格
+ +	小米手机	小米	￥1999
+ +	小米净水器	小米	￥4999
+ +	小米电视	小米	￥5999