js的事件机制及常用字符串方法

js的事件机制及常用字符串/数组方法

1.事件及事件代理的实现机制

1.1 事件添加

java对象的事件添加有有三种方法

（1）通过对象的事件属性上

<button onclick="console.log)(this.innerHTML)">恭喜发财</button>  //点击按钮，控制台输出 “恭喜发财”四个字

（2）通过脚本添加到事件属性上

const btn = document.querySelector("button");
btn.onclick = () => {
    console.log(btn.innerHTML);
}

注意事项：方法（2）不能重复定义同一个事件，后面添加的会前面添加的覆盖掉

// 第一个
btn.onclikc = () => {
    console.log(btn.innerHTML);
};
// 第二个
btn.onclick = () => {
    console.log(typeof btn);
};
//最终的输出结果是object，第一个事件属性的期望输出innerHTML被覆盖

（3）通过事件监听器添加事件：addEventListener(事件类型,事件回调方法,触发阶段)

const btn = document.querySelector("button");
btn.addEventListener("click",function(){
    console.log(btn.innerHTML，"第一次");
});

注意事项：通过回调添加的事件是无法移除的，可以用以下方法进行移除

const handle = () => console.log(btn.innerHTML,"第二次");//结合上面代码
//添加以下代码。按钮点击之后，控制台输出：
//恭喜发财 第一次
//恭喜发财 第二次
btn.addEventListener("click",handle);
// 可以通过removeEventListenner来移除事件
btn.removeEventListener("click",handle);

1.2 事件派发

一般情况下，事件都需要用户作出某个操作之后才能触发，如果我们希望某个事件能够自动触发时，可以通过事件派发来实现

const ev = new Event("click"); //指定事件类型
let i = 1;
btn.addEventListener("click",function(){
    console.log("第" + i + "次点击了按钮。");
    i++;
}); //添加事件监听，点击之后，控制台输出：第i次点击了按钮。（每点一次，i递增1）
//事件派发，正常情况是点击后，控制台才会输出第i次点击了按钮，但是通过事件派发之后，页面加载完成，控制台就会输出“第1次点击了按钮”，相当于自动执行了一次
btn.dispatchEvent(ev);
//如果我们希望按钮能够自动第1秒钟点击一次，让控制台不断输出，可以添加定时器实现
setInterval("btn.dispatchEvent(ev)",1000);

1.3 事件代理

事件的绑定者与事件的触发者是两个不一样的概念，如：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
const lis = document.querySelector("ul");
lis.foreach(
    li => (li.onclick = ev =>{
    console.log(ev.type);
    //事件绑定者
    console.log(ev.currentTarget);
    //事件触发者
    console.log(ev.Target);
    console.log(ev.path);//控制台输出：li ul body html document window(其实就是事件冒泡的路径，on事件不支持事件捕获）
    })
);

如果我们希望通过用户点击1、2、3、4时，来触发某些事件，那我们需要给每个li都添加一个事件监听器，且每个li添加的事件代码完全一样。此时我们可以将事件将由ul来代理，对事件来讲，ul就是事件绑定者，li就是事件触发者，实际上，事件触发者通常是事件绑定者的子元素

2.简版留言板

代码：

    <div class="container">
      <label for="">请留言：</label>
      <input type="text" class="newMessage" id="" />
      <ol class="oldMessage"></ol>
    </div>
    <script>
      //用户在文本框内输入的新留言
      const newMessage = document.querySelector(".newMessage");
      //用户已经输入过的旧留言，即是在下方显示的留言
      const oldMessage = document.querySelector(".oldMessage");
      newMessage.onkeydown = (ev) => {
        // console.log(ev.key);  可以打印输入到文本框的字符
        // 如果用户输入enter，代表输入结束，提交内容
        if (ev.key === "Enter") {
          if (newMessage.value.length === 0) {
            alert("输入不允许为空");
          } else {
            //    尝试在控制台输出文本框中的输入内容，无误
            // console.log(newMessage.value);
            //显示li的方法1：
            // const li = document.createElement("li");
            // li.innerHTML = newMessage.value;
            // oldMessage.insertAdjacentElement("afterbegin", li);
            //添加li的方法2：
            let newMessagelist = `<li>${ev.currentTarget.value}</li>`;
            oldMessage.insertAdjacentHTML("afterbegin", newMessagelist);
            //当将新留言添加到下面li中显示后，清空原来的输入框
            ev.currentTarget.value = null;
          }
        }
      };
        //当用户点击留言时，删除留言，如果加入一个链接或者一个按钮作为提示，用户体验好点，可以通过parentNode获取到对应的父元素li
      oldMessage.onclick = (ev) => {
        // console.log(ev.currentTarget);
        // console.log(ev.target);
        //当用户点击留言时，获取点击事件的触发对象li，然后从ol中通过removeChile方法，去除子元素li
        oldMessage.removeChild(ev.target);
      };
    </script>

3.字符串常用方法

//1 concat()拼装
let str = "html".concat(" css ","php !",888); //输出html css php !888
//2 slice(start,end)取子串
srt ="hello world!";
console.log(srt.slice(6,9));//输出wor
//3 substr(start,length) 取子串
str = "hello world!";
console.log(srt.substr(6,4));//输出worl
//4 trim();删除两端的空格
str = " hello     ";
console.log(str.trim());//输出hello
//5 将字符串打成数组
res = "hello".split("");
console.log(res);//输出：{"h","e","l","l","o"}
//6 替换其中字符 replace(old,new)
str = "hello world";
console.log(str.replace("e","a"));//输出：hallo world
console.log(str.replace(/o/g,"k"));//将所有的o都换成k，输出hellk,wkrld
//7 寻找索引search()
str = "hello world!"
console.log(str.search("!"));//返回"d"的首个位置索引，10
//8 字符串长度
console.log(str.length);//输出12
//9 转换大写或者小写
str = "Hello World!";
console.log(str.toUpperCase());//输出HELLO WORLD!
console.log(str.toLowerCase());//输出hello world!
//10 返回指定索引位置的字符
str = "hello";
console.log(str.charAt(4));//输出o