事件与常用函数

事件代理的实现机制

    <body>
    <button>
        button1
    </button>
    <button>
        button2
    </button>
    <button>
        button3
    </button>
    <script>
        const but2=document.querySelector("body button:nth-of-type(2)");
        //通过onclick来添加事件,不能重复给一个变量添加事件，后面的会覆盖前面的
        bth2.onclick=function(){
        this.style.color="red";
        };
        //移除事件
        bth2.onclick=null
        //通过事件监听器来添加事件，用事件监听器给同一个变量添加事件不会覆盖，会依次执行
        const bth3=document.querySelector("body button:nth-of-type(3)");
        bth3.addEventListener("click",function(){
        console.log(this.innerHTML,"第一次");
        })
        bth3.addEventListener("click",function(){
        console.log(this.innerHTML,"第二次");
        });
        //普通移除无法移除事件监听器
        //通过吧事件函数给一个独立变量，然后事件派发给到需要的地方
        const handle=()=>console.log(bth3.innerHTML,"第3次");
        bth3.addEventListener("click",handle);
        //删除
        btn3.removeEventListener("click", handle);
        const btn4 = document.querySelector("body button:nth-of-type(4)");
        //事件传递就两种，捕获：从外到内，冒泡从内到外
    </script>
    </body>

留言板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label><input type="text" name="message" /></label>
    <ol id="list"></ol>
    <script>
      //获取元素
      const msg = document.querySelector("input");
      const list = document.querySelector("#list");
      //把文本框里面的东西弄到下面
      msg.onkeydown = (ev) => {
        //键盘事件中，key表示按下的键名
        // console.log(ev.key);
        // 判断是否输出为enter;
        if (ev.key === "Enter") {
          //非空判断
          if (ev.currentTarget.value.length === 0) {
            alert("内容不能为空");
          } else {
            //讲留言添加到列表中
            //创建留言
            //文本框里面value就是框里面填写的内容
            let str = `<li>${ev.currentTarget.value}<button>删除</button></li>`;
            //留言永远是最新的，所以要到第一天
            //这个支持html字符串里面有标签，afterbegin是添加到起始符后面
            list.insertAdjacentHTML("afterbegin", str);
            //清空文本框内上一条留言
            ev.currentTarget.value = "";
            const ol = document.querySelector("body ol");
            const bu = document.querySelectorAll("body button");
            for (let i = 0; i < bu.length; i++) {
              bu[i].onclick = function () {
                //删除当前的父级，按钮的父级就是li，
                ol.removeChild(this.parentNode);
              };
            }
          }
        }
      };
    </script>
  </body>
</html>

删除第二条留言

字符串方法练习

<script>
      //1.concat(),字符串拼接，会自动类型转换，
      let str = "html".concat(" css ", " php! ", 888);
      console.log(str);
      //2.slice（起始start，结束end）取子串
      str = "hello php.cn";
      res = str.slice(0, 5);
      console.log(res);
      //substr（开始，获取的数值长度）
      res = str.substr(0, 5);
      console.log(res);
      //4.teim（）删除两端空格
      let psw = "   root888   ";
      console.log(psw.length);
      console.log(psw.trim().length);
      //5.把字符串打成数组,字符串中间的空格也算
      res = str.split("");
      console.log(res);
      //用法,括号里面填写就字符串就是从这个开始分成两份
      res = "admin@qq.com".split("@");
      console.log(res);
      //6看字符某一位
      console.log(str.charAt(0));
    </script>

事件代理的实现机制

留言板

字符串方法练习

更多相关文章

随机推荐