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

<!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>事件冒泡，代理</title>
</head>
<body>
    <button onclick="show()">点击</button>
    <script>
        function show(){
            // 事件对象：
            console.log(event);
            // 事件主体：
            console.log('事件主体：',event.currentTarget);
            console.log('事件目标', event.target);
            // 无事件委托，二者一样； 
            console.log(event.currentTarget===event.target);
        }
    </script>
    <ul class="list">
        <li data-index="1">item1</li>
      <li data-index="2">item2</li>
      <li data-index="3">item3</li>
      <li data-index="4">item4</li>
      <li data-index="5">item5</li>
    </ul>
    <script>
        // let items= document.querySelectorAll('li');
        // // items.forEach((item)=>(item.onclick=()=>console.log(event.currentTarget)));
        // items.forEach(
        //     function (item){
        //         item.onclick = function(){
        //             console.log(event.currentTarget);
        //             // 阻止冒泡 ： 
        //             event.stopPropagation();
        //         }
        //     }
        // );
        // 事件冒泡：就是父级如果和子级有同样的事件，那么子级的事件会传递到父级
        // 事件冒泡的关键点：1，要有父级 2.事件相同： 
        // document.querySelector('ul').onclick = () => console.log('li的父级ul',event.currentTarget);
        // document.body.onclick = () => console.log('ul的父级body:';event.currentTarget);
        // window.onclick = () => console.log(event.currentTarget);
        // 事件代理委托： 将子元素的事件委托到父级触发
        let ul = document.querySelector('ul');
        ul.onclick = function (){
            // 事件主体就是父级：event.currentTarget: 
            // 事件目标就是子级：event.target: 
            // event.target.dataset.index可以查看绑定的是哪一个子级 
            console.log(event.target,event.target.dataset.index);
            console.log(event.currentTarget);
            // 当有委托的情况下二者不一样 
            console.log(event.target === event.currentTarget);
        };
   </script>
</body>
</html>

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


<script>
        let str = 'PHP中文网';
        let str2 = '你好  朱老师';
        let str3 = '  135  ';
        let str4 = 'HelloWorld';
        let str5 = 'helloPhp';
        // console.log(str);   
        // console.log(str.length) ;
        // console.log(str[0],str[1],str[2]);
        // console.log(str.charAt(1),str[1]);
        // console.log(str.indexOf('中'));
        // console.log(str.search('中'));
        // console.log(str.concat('php.cn'));
        // console.log(str.replace('中文网','.cn'));
        // console.log(str.slice(0,2));
        // console.log(str.substr(0,4));
        // console.log(str.substr(-3,2));
        // 字符串的拼接：concat()
        console.log(str.concat(str2));
        // 从后面检索字符串：lastIndexOF: 
        console.log(str2.lastIndexOf('老'));
        // 截取字符串：substring 
        console.log(str2.substring(0,5));
        // 将字符串拆开为数组：split 
        console.log(str.split(str[1]));
        // 去除字符串中的空白符：trim 
        console.log(str2+str3);
        console.log(str2 + str3.trim());
        // 大小写转换：toUpperCase(),toLowerCase()
        // 全转为大写： 
        console.log(str4.toUpperCase());
        // 全转为小写： 
        console.log(str4.toLocaleLowerCase());
    </script>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

VScode

2022-07-04 19:45:45