事件冒泡与字符串API

1. 事件冒泡,事件代理的原理是什么,实例演示

    <ul>
      <li data-index="1" class="item1">item1</li>
      <li data-index="2" class="item2">item2</li>
      <li data-index="3" class="item3">item3</li>
      <li data-index="4" class="item4">item4</li>
    </ul>
    <script>
      //事件传递机制与事件冒泡/事件代理/委托
      //event.currentTarget 事件主体
      //event.target 事件目标
      //获取Li元素
      const items = document.querySelectorAll("ul>li");
      //   items.forEach(function (v) {
      //     v.onclick = function () {
      //       console.log(event.currentTarget.textContent);
      //     };
      //   });
      //   //箭头函数简写
      //   items.forEach((v) => {
      //     v.onclick = () => {
      //       console.log(event.currentTarget.textContent);
      //       //阻止冒泡
      //       event.stopPropagation();
      //     };
      //   });
      //事件冒泡:当前元素的事件会向上（向父级）进行传递，当父级有同名事件时会自动触发
      //父级，同名事件
      //   获取ul元素;添加onclick事件
      const ul = document.querySelector("ul");
      //   ul.onclick = function () {
      //     console.log(event.currentTarget);
      //   };
      //   //   获取body元素;添加onclick事件
      //   const body = document.querySelector("body");
      //   body.onclick = function () {
      //     console.log(event.currentTarget);
      //   };
      //   //   获取html元素;添加onclick事件
      //   document.documentElement.onclick = () => console.log(event.currentTarget);
      //   //   获取document元素;添加onclick事件
      //   document.onclick = () => console.log(event.currentTarget);
      //   //   获取window元素;添加onclick事件
      //   window.onclick = () => console.log(event.currentTarget);
      /**
       * 根据冒泡原理，当前元素上的同名事件，会向上传递到它的父级
       * 如果当前是一个列表，或者当前是一组集合，那么添加事件会非常麻烦
       * 不管当前有多少个元素，根据DOM树的特点，都会有一个父级
       * 所以，可以将这个事件，直接添加到它的父级上即可，可以极大简化代码
       * 但是要通过一些手段，来判断当前是哪个子元素触发了事件
       */
      ul.onclick = () => {
        //为了知道事件目标，可以为每个事件目标添加自定义data-index
        console.log(event.target.dataset.index);
        console.log(event.target.classList.value);
      };
    </script>

2. 自选5个课堂中未提及的字符串API,进行演示(MDN)

    <script>
      //自选5个课堂中未提及的字符串API,进行演示(MDN)
      let str = "I是1个程序员";
      //charAt(index) 返回指定索引位置处的字符,从0开始计数的整数
      console.log(str.charAt(3)); ///return 3;
      //charCodeAt(index) 返回一个整数，代表指定位置上的字符的Unicode编码
      let str1 = "ASDOINENFidnefl";
      console.log(str.charCodeAt(4)); //return 3143
      //concat(string,....),返回字符串值，该值包含所有字符串字符
      console.log(str.concat(str1)); //return   I是1个程序员ASDOINENFidnefl
      //indexOf(subString[,startIndex]),返回子字符串第一个出现的位置
      let str2 = "程序员";
      console.log(str.indexOf(str2)); //return 4
      //lastIndexOf(subString[,startIndex]),返回子字最后出现换位置
      let str3 = "I是1个程序员I是1个程序员I是1个程序员";
      console.log(str3.lastIndexOf(str2)); //return 18
      //slice(start,[end]) 返回字符串的片段。
      console.log(str.slice(4)); //return程序员
      //split([separator[,limit]]) 将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
      let str4 = "nek kenk ,ek";
      console.log(str4.split(" ", 1)); //reurn nek
      //substr(start[,length])返回一个从指定位置开始的指定长度的子字符串。
      console.log(str3.substr(8, 4)); //return 是1个程
      //substring(start,end) 返回位于 String 对象中指定位置的子字符串。从 start 到最后（不包含 end ）的子字符串的字符串。
      console.log(str3.substring(8, 12)); //return 是1个程
      console.log(str1.toLowerCase());
      console.log(str1.toUpperCase());
    </script>