js：事件、留言板、常用字符串函数

1 事件

事件添加

3个方法

• 1

    <!-- 1 添加到元素的属性上面 -->
    <button onclick="console.log(this.innerHTML)">按钮1</button>

• 2

  <!-- 2 通过脚步添加到事件属性上面 -->
    <script>
        const btn2 = document.querySelector('body button:nth-of-type(2)');
        // 添加事件
        btn2.onclick = function () {
            console.log(this.innerHTML);
        }
        // onclick 不能重复定义同一事件. 第3中的事件监听器可以
        // 移除事件
        // bth2.onclick=null;

• 3 （重要）

  // 3 通过事件监听器添加事件
        // addEventListener(事件类型，事件回调方法，触发阶段)
        const btn3 = document.querySelector('body button:nth-of-type(3)')
        btn3.addEventListener('click', function () {
            console.log(this.innerHTML, '第一次');
        })
        btn3.addEventListener("click", function () {
            console.log(this.innerHTML, "第二次");
        });
        //   3.1 移除事件，通过回调添加的事件无法移除
        //  事件方法函数
        const handle = () => console.log(btn3.innerHTML, "第三次");
        btn3.addEventListener("click", handle);
        // 3.2 事件派发
        const btn4 = document.querySelector("body button:nth-of-type(4)");
        // 自定义事件
        const ev = new Event("click");
        let i = 0;
        btn4.addEventListener("click", function () {
            console.log("点击了广告, 共计: " + i + "元");
            i += 0.5;
        });
        // 分配dispatchEvent
        //   btn4.dispatchEvent(ev);
        // 使用间歇式定时器来自动点击广告
        setInterval("btn4.dispatchEvent(ev)", 1000);

  事件传递

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

      // 事件传递:
      // 1. 捕获: 从最外层元素逐级向内直到事件的绑定者
      // 2. 目标: 到达事件目标
      // 3. 冒泡: 从目标再由内向外逐级向上直到最外层元素
      const lis = document.querySelectorAll("li");
      lis.forEach(
        li =>
          (li.onclick = ev => {
            // console.log(ev); 事件默认参数，默认事件对象
            // 事件对象: 保存着当前事件的所有信息
            // 事件类型
            // console.log(ev.type);
            // 事件绑定者
            console.log(ev.currentTarget);
            // 事件触发者
            // console.log(ev.target);
            // console.log(ev.currentTarget === ev.target);
            // 事件传递的路径
            console.log(ev.path);
            // 阻止事件冒泡
            ev.stopPropagation();
          })
      );
      // on+event: 不支持捕获,只有冒泡
      //   li.onclick = function () {};
      // 捕获, 第三个参数是true表示事件在捕获阶段触发,false是冒泡(默认)

  事件冒泡与事件代理

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <script>
      // 事件代理: 也叫"事件委托"
      const lis = document.querySelectorAll("li");
      // 遍历每个li,并逐个为它添加点击事件
      //   lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)));
     // 通过父节点添加点击事件（常用 重要） document.querySelector("ul").addEventListener("click", ev => {
        // 事件绑定者
        console.log(ev.currentTarget);
        // 事件触发者,通常是"事件绑定者"的子元素
        console.log(ev.target.innerHTML);
      });
    </script>

  2 留言板

     // 获取元素
      const msg = document.querySelector("input");
      const list = document.querySelector("#list");
      msg.onkeydown = ev => {
        // 键盘事件中,key表示按下的键名
        // console.log(ev.key);
        if (ev.key === "Enter") {
          // 非空判断
          if (ev.currentTarget.value.length === 0) {
            alert("内容不能为空");
          } else {
            //   将留言内容添加到列表中
            // 创建留言
            let str = `<li>${ev.currentTarget.value}</li>`;
            // 应该将最新的信息永远放在第一条
            list.insertAdjacentHTML("afterbegin", str);
            // 清空上一条留言
            ev.currentTarget.value = null;
          }
        }
      };

  

  3 字符串常用函数

  ```javascript

    // 1. concat()拼装
    let str = "html".concat(" css ", "php !", 888);
    console.log(str);
    // 2. slice(start, end):取子串
    const strs = "123456789"
    //strs.slice(2,4)// 34
    // 支持负数
    strs.slice(-3, -1)// 78
    // 3. substr(start(开始位置), length（数量）)
    res = strs.substr(0, 5);
    console.log(res); //12345
    // 4. trim():删除二端空格
    let psw = "   root888    ";
    console.log(psw.length);// 14
    psw = "   root888    ";
    console.log(psw.trim().length);// 7
    // 5.  split() 将字符串打成数组
    res = strs.split("");
    console.log(res);// (9) ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
    // 6. charAt(序号) 。返回序号位置上的字符
    res = strs.charAt(0)
    console.log(res); // 1
    // 7.  indexOf() 定位字符串中某一个指定的字符首次出现的位置
    res= strs.indexOf(4)
    console.log(res);// 3
    // 8.lastIndexOf() 与indexOf方法类似，只不过它是从该字符串的末尾开始查找而不是从开头。
    // 9. replace(要替换的，替换成) 在字符串中用某些字符替换另一些字符。
    res =strs.replace(5,0)
    console.log(res);// 123406789
    // 10.  match() 查找字符串中特定的字符，并且如果找到的话，则返回这个字符
    res = strs.match(23)
    console.log(res);// ["23", index: 1, input: "123456789", groups: undefined]

```