事件代理、留言板和字符串函数

事件代理

事件传递
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>
      <textarea
        name="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>

运行结果：
字符串函数

事件代理

留言板

字符串函数

相关文章