JS学习小结（事件代理的实现机制、留言板功能的实现、常用字符串函数汇总）

事件代理的实现机制

事件代理指的是利用父元素绑定事件，利用子元素的触发事件，获取子元素并实现相关操作的方法。好处是不用为每个子元素绑定事件，可以使代码简洁、易读。
事件代理的底层逻辑是事件冒泡，事件冒泡指的是当子元素和父元素均有点击事件时，会认为事件流是由小到大的顺序发生事件。
事件代理示例代码如下

<ul>
    <li>栏目1</li>
    <li>栏目2</li>
    <li>栏目3</li>
    <li>栏目4</li>
    <li>栏目5</li>
</ul>
<script>
    const ul = document.querySelector("ul");
    ul.addEventListener("click",ev => {
        console.log(ev.currentTarget);
        console.log(ev.target);
    });
</script>

简易留言板带删除功能

<input type="text" name ="liuyan" />
<ol></ol>
<script>
    //获取元素
    const shuchu = document.querySelector("input");
    const ol = document.querySelector("ol");
    //添加keydown事件
    shuchu.addEventListener("keydown",ev =>{
        if(ev.key === "Enter"){
            if (ev.currentTarget.value.trim().length === 0){
                alert('请输入内容');
            }else{
            ol.insertAdjacentHTML("afterbegin",`<li>${ev.currentTarget.value}<span>删除</span></li>`);
            }
            ev.currentTarget.value = "";
        }
    })
    //添加click事件，删除对应的li内容
    ol.addEventListener("click",ev =>{
        let span = ev.target;
        if(span.innerHTML === "删除"){
            console.log(span.parentNode.parentNode.removeChild(span.parentNode));
        }
    })
</script>

10个常用字符串方法

<script>
    //1、indexOf() 返回字符串中指定文本_首次_出现的位置,如果未找到文本，返回-1,找到会返回对应的索引号，方法的第二个参数可设置开始的检索位置。
    let str = "跟着朱老师学php,真的很棒";
    console.log(str.indexOf("朱老师"));
    //2、slice(start, end)提取部分字符串函数，两个参数均为索引号，提取适用左闭右开原则。
    let str2 = "跟着朱老师学php,真的很棒";
    console.log(str2.slice(2,5));
    //3、substr(start,length)提取部分字符串，第一个参数为索引号，第二个为长度。
    let str3 = "跟着朱老师学php,真的很棒";
    console.log(str3.slice(2,3));
    //4、replace() 替换指定字符，默认只替换匹配到的第一个值，参数1为被替换字符串，参数2为替换内容
    let str4 = "跟着朱老师学php,朱老师教的很实用";
    console.log(str4.replace("朱老师","天蓬老师"));
    //5、concat() 字符串拼接
    let txt1 = "朱老师";
    let txt2 = "教的真好";
    let txt3 = "，大家都很喜欢他";
    console.log(txt1.concat(txt2,txt3,"给他点32个赞"));
    //6、trim() 删除字符串两端空字符
    let str6 = " hello world ";
    console.log(str6.trim());
    //7、charAt() 返回字符串中指定下标（位置）的字符
    let str7 = "hello world";
    console.log(str7.charAt(1));
    //8、split() 把字符串转换为数组，参数为分隔符
    let str8 = "一,二,三,四,五";
    console.log(str8.split(","));
    //9、toUpperCase() 转换为大写字母
    let str9 = "hello";
    console.log(str9.toUpperCase());
    //10、toLowerCase() 转换为小写字母
    let str10 = "HELLO";
    console.log(str10.toLowerCase());
</script>