收藏
天蓬老师批改状态：合格
老师批语：
事件传递
1.捕获：从最外层的元素逐级向内知道事件的绑定着
2.目标：到达事件目标
3.冒泡：从绑定着再有内到外逐级向上知道最外层的元素
主要学习冒泡，事件类型ev.type，事件绑定着 ev.currentTarget，事件触发者 ev.target事件传递路径 ev.path，阻止事件冒泡 ev.stopPropagation，事件代理也叫事件委托，遍历每个li并逐个为它添加点击事件。
代码如下：
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
const Lis = document.querySelector("ul");Lis.addEventListener("click", (ev) => {// 事件绑定者console.log(ev.currentTarget);// 事件触发者，通常是事件绑定者的子元素console.log(ev.target.innerHTML);ev.target.style.background = "#aaa";});
代码如下：
<body><form><h3>留言板：</h3><textareaname="liuyan"id="liuyan"value="aaa"cols="30"rows="10"placeholder="请输入评论内容……"></textarea></form><ol id="list"></ol>
const msg = document.querySelector("textarea");const list = document.querySelector("#list");msg.onkeydown = (ev) => {// 检查触发条件if (ev.key === "Enter") {// 非空判断if (ev.currentTarget.value.length === 0) {alert("输入内容不能为空");} else {// console.log(ev.currentTarget.value);let htmlStr = `<li>${ev.currentTarget.value}<button onclick = del(this)>删除</button></li>`;list.insertAdjacentHTML("afterBegin", htmlStr);ev.currentTarget.value = null;// msg.value = null;或者上边的语句}}};function del(element) {list.removeChild(element.parentNode);// confirm('确定要删除这条评论吗？') ? element.parentNode.outerHTML = null : false;// confirm("你确定删除留言吗？")// ? (element.parentNode.outerHTML = null)// : false;}
运行结果：
字符串函数，如下代码所示：
<script>// concat();字符串拼装let str = " html ".concat("css", "php", 789);console.log(str);// slice(开始下标，结束下标)字符串截取let jq = "hello!";console.log(str.trim().slice(0, 3));console.log(str.substr(0, 3));// trim();删除两端的空格键console.log(str.trim());// 字符串打成数组split()console.log(str.split(""));// 字符串转大写console.log(str.trim().toUpperCase());// 字符串转小写console.log(str.trim().toLowerCase());// toLowcase()</script>
运行结果：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
