From a73acc5300b135e251f6453e3a72b5e1e1124ac8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=BF=97=E5=8B=87?= <2711273115@qq.com> Date: Sun, 19 Nov 2023 14:04:12 +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: 陈志勇 <2711273115@qq.com> --- ...13\344\273\266\345\247\224\346\211\230.md" | 254 ++++++++++++++++++ 1 file changed, 254 insertions(+) create mode 100644 "09 \351\231\210\345\277\227\345\213\207/20231114\344\272\213\344\273\266\346\265\201\344\272\213\344\273\266\345\247\224\346\211\230.md" diff --git "a/09 \351\231\210\345\277\227\345\213\207/20231114\344\272\213\344\273\266\346\265\201\344\272\213\344\273\266\345\247\224\346\211\230.md" "b/09 \351\231\210\345\277\227\345\213\207/20231114\344\272\213\344\273\266\346\265\201\344\272\213\344\273\266\345\247\224\346\211\230.md" new file mode 100644 index 0000000..903b8d1 --- /dev/null +++ "b/09 \351\231\210\345\277\227\345\213\207/20231114\344\272\213\344\273\266\346\265\201\344\272\213\344\273\266\345\247\224\346\211\230.md" @@ -0,0 +1,254 @@ +# 笔记 + +###### 事件流 + +捕获：从父—>子（从大—>小，外—>内） +冒泡：从子—>父（从小—>大，内—>外）（什么是冒泡？本来点1，结果3，4都被触发） + +结论 + +1. addEventListener 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发 +2. addEventListener 第3个参数为”true”表示捕获阶段触发，false 表示冒泡阶段触发，默认值为false +3. 事件流只会在父子元素具有相同事件类型时才会产生影响 +4. 绝大部分场景都采用默认的冒泡模式(其中一个原因是 早期IE不支持捕获) + +```js +/* 如何阻止冒泡？ +1.添加事件对象 +2.该事件对象有个stop方法 +*/ +// 阻止冒泡 +e.stopProagation() + +// 事件委托 +e.target : // 事件对象的点击目标 +e.target.tagName : // 目标的标签名称 +console.dir() : // 打印目录 + +// 鼠标事件(有冒泡) +mouseover:鼠标移入 +mouseout:鼠标移出 +// 鼠标事件(无冒泡，推荐) +mouseenter:鼠标移入 +mouseleave:鼠标移出 + +// 默认行为 : 指标签原有的行为 +/* 如何阻止默认行为？ +1.添加事件对象 +2.该事件对象有个方法：preventDefault() +*/ +// 阻止默认行为 +e.preventDefault() +``` + +# 作业 + +```js + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 全选 + 商品商家价格
+ + 小米手机小米￥1999
+ + 小米净水器小米￥4999
+ + 小米电视小米￥5999
+ + + + +``` + +```js + + + + + + + + tab栏切换 + + + + +
+
+

每日特价

+ +
+
+
< img src="./images/tab00.png" alt="" />
+
< img src="./images/tab01.png" alt="" />
+
< img src="./images/tab02.png" alt="" />
+
< img src="./images/tab03.png" alt="" />
+
< img src="./images/tab04.png" alt="" />
+
+
+