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

1 事件

事件添加

3个方法

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

<!-- 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]

```

1 事件

事件添加

事件传递

事件冒泡与事件代理

2 留言板

3 字符串常用函数

更多相关文章

随机推荐