事件节点案例
二维码-点击关闭（多个）
关闭多个的，就是找通过parentNode找到父元素，隐藏父元素，那么子元素自然也隐藏不见了，还有获取到父元素下的每个子元素遍历，一个个关闭
<!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>
<style>
div {
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: 100px auto;
text-align: right;
}
</style>
</head>
<body>
<div><img src="./1.png" alt=""></div>
<div><img src="./1.png" alt=""></div>
<div><img src="./1.png" alt=""></div>
<div><img src="./1.png" alt=""></div>
<script>
/*
1 先处理好静态结构
2 先获取到关闭按钮 数组
3 遍历数组 给关闭按钮 绑定 点击事件
4 事件触发了
通过 this 获取到 对应的父元素 隐藏
*/
let i = document.querySelectorAll("img")
// 遍历
for (let index = 0; index < i.length; index++) {
i[index].addEventListener("click", function () {
// this 获取到 对应的父元素 隐藏
this.parentNode.style.display = "none";//多个关闭和单个不同的是dom元素名换成this仅仅代表关闭自己就可以了
})
}
</script>
</body>
</html>
二维码-点击关闭（单个）
单个关闭，就是找通过parentNode找到父元素，隐藏父元素，那么子元素自然也隐藏不见了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>09-二维码-点击关闭.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img class="close-btn" src="./images/2.png" alt="">
<img src="./images/1.png" alt="">
</div>
<script>
// 1 获取 关闭 标签
let closeBtn=document.querySelector(".close-btn");
// 2 点击事件
closeBtn.addEventListener("click",function () {
// 3 是 当前点击的元素的 父元素
// console.log(this.parentNode);
this.parentNode.style.display="none"; // 隐藏父元素
})
</script>
</body>
</html>
移动点菜的案例（1）
就是将左边的东西点击的时候放到右边（缺点不可以放回来）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>14-剪切-移动.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
width: 300px;
}
.left {
background-color: yellow;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="left">
<li>龙虾</li>
<li>鲍鱼</li>
<li>皇帝蟹</li>
<li>鱼子酱</li>
</ul>
<ul class="right"></ul>
<script>
/*
1 获取到左侧所有的li标签
2 遍历 绑定点击事件
appendChild
父元素.appendChild(要插入的元素-点击了谁)
*/
let lis = document.querySelectorAll('li');
let right = document.querySelector('.right');
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click', function () {
right.appendChild(this);
});
}
</script>
</body>
</html>
移动点菜的案例（2）
就是将左边的东西点击的时候放到右边,可以放回来（缺点必须全部放过去才能拿回来）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>14-剪切-移动.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
width: 300px;
}
.left {
background-color: yellow;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="left">
<li>龙虾</li>
<li>鲍鱼</li>
<li>皇帝蟹</li>
<li>鱼子酱</li>
</ul>
<ul class="right"></ul>
<script>
/*
问题
1 移动的方向不确定
在判断 点击时候 先判断 哪个ul标签的子元素的长度为 0 就移动到谁哪里
*/
let lis = document.querySelectorAll('li');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
// 准备要插入新元素的 父元素
let parent;
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click', function () {
// 先判断当前要插入到哪个标签中 谁的子元素长度为0 就插入到谁哪里
// right.appendChild(this);
if (right.children.length === 0) {
// 现在要插入到右边
parent = right;
}
if (left.children.length === 0) {
parent = left;
}
parent.appendChild(this);
});
}
</script>
</body>
</html>
移动点菜的案例（3）
将上面所说的都解决了，可以随时拿过来拿过去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>14-剪切-移动.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
width: 300px;
}
.left {
background-color: yellow;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="left">
<li>龙虾</li>
<li>鲍鱼</li>
<li>皇帝蟹</li>
<li>鱼子酱</li>
</ul>
<ul class="right"></ul>
<script>
/*
要插入到哪里 不确定
1 获取被点击的元素的父元素
left > 皇帝蟹 this.parentNode
2 父元素之后 和 left 或者 right比较
如果 被点击的父元素 不等于 right ，设置 要插入的父元素 = right
如果 被点击的父元素 不等于 left ，设置 要插入的父元素 = left
*/
let lis = document.querySelectorAll('li');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let parent;
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click', function () {
//常规写法
// if (this.parentNode !== right) {
// parent = right;
// }
// if (this.parentNode !== left) {
// parent = left;
// }
//三元表达式简写
parent = this.parentNode !== right ? right : left;
parent.appendChild(this);
});
}
</script>
</body>
</html>
微博输入保存案例
就是文本域显示字数和限制字数加点发布把内容新建存起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ol {
width: 500px;
}
</style>
</head>
<body>
<div class="w">
<div class="controls">
<!-- <img src="images/tip.png" alt=""><br> -->
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="1000"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>1000</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ol>
</ol>
</div>
</div>
<script>
let area = document.querySelector("#area")
let useCount = document.querySelector(".useCount")
let fa = document.querySelector('#send')
let ul = document.querySelector("ol")
area.addEventListener("input", function () {
//字符串长度的值赋予显示字数
useCount.innerText = area.value.length;
//限制字数，有点小bug,复制粘贴的话，本身被复制的字数不算在限制里面
// if (area.value > 200) {
// area.value = area.value.slice(0, 200)
// }
})
//作业要求：1.点击发布的时候文本域显示字数 2.点发布的时候输出的文字生成一个存放的标签，同时清空文本域
//思路：文本域早上做过了，直接c+v，点击发布的时候生成存放的标签，先写按钮点击事件，在里面写标签生成和插入，然后百度怎么清空文本域，，最后把早上的计算文本域字数的代码再复制丢进去就可以了，用ol还可以有序排列
//发布按钮点击事件
fa.addEventListener("click", function () {
//创建一个新的li标签
let li = document.createElement("li")
//插入li标签
ul.appendChild(li)
//把文本域里面的内容（value：文本域属性）赋予li
li.innerText = area.value
//函数清空文本域里面的文字
area.value = area.value.slice(0, 0)
//把文本域的字符串长度的值赋予左边span标签的字数显示
useCount.innerText = area.value.length;
})
</script>
</body>
</html>
