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>
