博客列表 >事件代理、留言板、字符串练习

事件代理、留言板、字符串练习

吳
原创
2021年01月08日 12:06:59609浏览

1. 事件代理的实现机制

事件代理:也叫事件委托,事件触发者通常是事件绑定者的子元素

  1. <ul>
  2. <li>item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. <li>item4</li>
  6. <li>item5</li>
  7. </ul>
  8. <script>
  9. const lis = document.querySelectorAll("li");
  10. document.querySelector("ul").addEventListener("click", (ev) => {
  11. // 事件绑定者
  12. console.log(ev.currentTarget);
  13. // 事件触发者
  14. console.log(ev.target.innerHTML);
  15. });
  16. </script>

2. 完成留言板,添加删除功能

删除前:

删除后:

  1. <label><input type="text" name="message" /></label>
  2. <ol id="list"></ol>
  3. <script>
  4. // 获取元素
  5. const msg = document.querySelector("input");
  6. const list = document.querySelector("#list");
  7. msg.onkeydown = (ev) => {
  8. // 键盘事件中,key表示按下的键名
  9. if (ev.key === "Enter") {
  10. // 非空判断
  11. if (ev.currentTarget.value.length === 0) {
  12. alert("留言内容不能为空");
  13. } else {
  14. // 将留言内容添加到列表中
  15. // 创建留言
  16. let str = `<li>${ev.currentTarget.value} <button onclick="this.parentElement.remove();">删除</button></li>`;
  17. // 应该讲最新的信息永远放在第一条
  18. list.insertAdjacentHTML("afterbegin", str);
  19. // 清空上一条留言
  20. ev.currentTarget.value = null;
  21. }
  22. }
  23. };
  24. </script>

3. 10 个字符串方法

  1. <script>
  2. // 1. concat()拼接
  3. let str = "html".concat(" css", " php ");
  4. console.log(str);
  5. // 2. slice(start,end):取子串
  6. str = "hello php.cn";
  7. let res = str.slice(5, 9);
  8. console.log(res);
  9. // 正方向从0开始,反方向从-1开始
  10. // 3. substr(start,length)
  11. res = str.substr(0, 5);
  12. console.log(res);
  13. // 4. trim();删除二端空格
  14. let psw = " rr888 ";
  15. console.log(psw.trim().length);
  16. // 5. 将字符串打成数组
  17. res = "admin@php.cn".split("@");
  18. console.log(res);
  19. // 6. 把字符串转为小写
  20. res = "ABCDEFG".toLowerCase();
  21. console.log(res);
  22. // 7. 返回字符串指定字符第一次出现的位置
  23. let ino = str.indexOf("c");
  24. console.log(ino);
  25. // 8. repeat() 重复次数字符串
  26. str = str.repeat(2);
  27. console.log(str);
  28. // 9.lastIndexOf() 子串最后一次出现位置
  29. let lpos = str.lastIndexOf("c");
  30. console.log(lpos);
  31. // 10.search() 搜索子串
  32. console.log(str.search("c"));
  33. </script>
上一条:DOM操作下一条:0106作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议