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>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VScode

2022-07-04 19:45:45