事件代理的实现机制
<body><button>button1</button><button>button2</button><button>button3</button><script>const but2=document.querySelector("body button:nth-of-type(2)");//通过onclick来添加事件,不能重复给一个变量添加事件，后面的会覆盖前面的bth2.onclick=function(){this.style.color="red";};//移除事件bth2.onclick=null//通过事件监听器来添加事件，用事件监听器给同一个变量添加事件不会覆盖，会依次执行const bth3=document.querySelector("body button:nth-of-type(3)");bth3.addEventListener("click",function(){console.log(this.innerHTML,"第一次");})bth3.addEventListener("click",function(){console.log(this.innerHTML,"第二次");});//普通移除无法移除事件监听器//通过吧事件函数给一个独立变量，然后事件派发给到需要的地方const handle=()=>console.log(bth3.innerHTML,"第3次");bth3.addEventListener("click",handle);//删除btn3.removeEventListener("click", handle);const btn4 = document.querySelector("body button:nth-of-type(4)");//事件传递就两种，捕获：从外到内，冒泡从内到外</script></body>
留言板
<!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><label><input type="text" name="message" /></label><ol id="list"></ol><script>//获取元素const msg = document.querySelector("input");const list = document.querySelector("#list");//把文本框里面的东西弄到下面msg.onkeydown = (ev) => {//键盘事件中，key表示按下的键名// console.log(ev.key);// 判断是否输出为enter;if (ev.key === "Enter") {//非空判断if (ev.currentTarget.value.length === 0) {alert("内容不能为空");} else {//讲留言添加到列表中//创建留言//文本框里面value就是框里面填写的内容let str = `<li>${ev.currentTarget.value}<button>删除</button></li>`;//留言永远是最新的，所以要到第一天//这个支持html字符串里面有标签，afterbegin是添加到起始符后面list.insertAdjacentHTML("afterbegin", str);//清空文本框内上一条留言ev.currentTarget.value = "";const ol = document.querySelector("body ol");const bu = document.querySelectorAll("body button");for (let i = 0; i < bu.length; i++) {bu[i].onclick = function () {//删除当前的父级，按钮的父级就是li，ol.removeChild(this.parentNode);};}}}};</script></body></html>
删除第二条留言
字符串方法练习
<script>//1.concat(),字符串拼接，会自动类型转换，let str = "html".concat(" css ", " php! ", 888);console.log(str);//2.slice（起始start，结束end）取子串str = "hello php.cn";res = str.slice(0, 5);console.log(res);//substr（开始，获取的数值长度）res = str.substr(0, 5);console.log(res);//4.teim（）删除两端空格let psw = " root888 ";console.log(psw.length);console.log(psw.trim().length);//5.把字符串打成数组,字符串中间的空格也算res = str.split("");console.log(res);//用法,括号里面填写就字符串就是从这个开始分成两份res = "admin@qq.com".split("@");console.log(res);//6看字符某一位console.log(str.charAt(0));</script>
