JS事件代理的实现机制 （附留言板小案例）

事件添加方式

添加到元素的事件属性上

<button onclick="console.log(this.innerHTML)">click</button>

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

<button>点击</button>
<script>
const btn = document.querySelector("button:nth-of-type(2)");
btn.onclick = function () {
   console.log(this.innerHTML);
};
</script>

• 通过脚本的方式添加事件，不能重复定义同一事件，后者会覆盖前者
• 移除事件 btn.onclick = null;

通过事件监听器添加事件

addEventListener(事件类型,事件回调方法, 触发阶段)

<button>事件监听</button>
<script>
const btn2 = document.querySelector("button:nth-of-type(3)");
btn2.addEventListener("click", function () {
    console.log(this.innerHTML);
 });
 //重复定义click事件
btn2.addEventListener("click", function () {
   console.log("重复定义了，但是没问题");
});
</script>

移除事件,通过回调添加的事件是无法移除

const handle = () => console.log("最后一次");
btn2.addEventListener("click", handle);
//移除
btn2.removeEventListener("click", handle);

事件派发小案例

<button>广告收入</button>
<script>
const btn3 = document.querySelector("button:nth-of-type(4)");
//自定义事件 用ev
const ev = new Event("click");
let i = 0;
btn3.addEventListener("click", function () {
console.log("广告被点击了", "挣了", i, "元");
i += 1;
});
//使用间歇式定时器来自动点击广告，1000=1秒
setInterval("btn3.dispatchEvent(ev)", 1000);
</script>

事件传递

捕获: 从最外层元素逐级向内直到事件的绑定者

• 第三个参数是true表示事件在捕获阶段触发,false是冒泡(默认)

<ul class="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
</ul>
<script>
const lis = document.querySelectorAll("li");
lis.forEach(
   (li) =>
   (li.click = (ev) => {
// 事件绑定者
// console.log(ev.currentTarget);
// 事件触发者
// console.log(ev.target);
// 事件传递的路径
// console.log(ev.path);
// 阻止事件冒泡
// ev.stopPropagation();
})
);
//window
 window.addEventListener("click", (ev) => console.log(ev.currentTarget), true);
 // document
document.addEventListener("click", (ev) => console.log(ev.currentTarget), true);
// html
document.documentElement.addEventListener("click", (ev) => console.log(ev.currentTarget), true);
// body
document.body.addEventListener("click", (ev) => console.log(ev.currentTarget), true);
// ul
document.querySelector("ul").addEventListener("click", (ev) => console.log(ev.currentTarget), true);
</script>

目标: 到达事件目标

冒泡: 从目标再由内向外逐级向上直到最外层元素

// ul
document.querySelector("ul").addEventListener("click",ev=>console.log(ev.currentTarget), false);
// body
document.body.addEventListener("click",ev=>console.log(ev.currentTarget),false);
// html
 document.documentElement.addEventListener("click",ev => console.log(ev.currentTarget), false);
// document
document.addEventListener("click",ev=>console.log(ev.currentTarget),false);
// window
 window.addEventListener("click",ev=>console.log(ev.currentTarget),false);

事件冒泡与事件代理

// 事件代理: 也叫"事件委托"
const lis = document.querySelectorAll("li");
// 遍历每个li,并逐个为它添加点击事件
// lis.forEach(li=>(li.onclick=ev=>console.log(ev.currentTarget)));
//事件代理方式
document.querySelector("ul").addEventListener("click", ev => {
// 事件绑定者
console.log(ev.currentTarget);
// 事件触发者,通常是"事件绑定者"的子元素
console.log(ev.target);
//查看事件触发者内容
console.log(ev.target.innerHTML);
});

常用表单事件

• 获取表单

<form action="" method="POST" name="login" id="login">
      <label class="title">用户登录</label>
      <label for="username">用户名：</label>
      <input type="text" name="username" />
      <label for="password">密码：</label>
      <input type="password" name="userpwd" />
      <button name="submit">登录</button>
    </form>
<script>
const login = document.forms.namedItem("login");
//去掉默认的提交动作
login.submit.onclick = (ev) => {
  ev.preventDefault();
  ev.stopPropagation();
  //非空验证方法
  isEmpty(ev.currentTarget.form);
};
//声明非空方法函数
function isEmpty(form) {
   if (form.username.value.length === 0) {
     alert("用户名不能为空");
     //关闭弹窗后获得焦点
     form.username.focus();
     return false;
} else if (form.userpwd.value.length === 0) {
     alert("密码不能为空");
     form.username.focus();
     return false;
} else {
    alert("登录成功");
}
}
</script>

留言板小案例

<label><input type="text" name="message" /></label>
<ol id="list"></ol>
<script>
// 获取元素
const msg = document.querySelector("input");
const list = document.querySelector("#list");
msg.onkeydown = ev => {
 // 键盘事件中,key表示按下的键名
// console.log(ev.key);
if (ev.key === "Enter") {
    // 非空判断
    if (ev.currentTarget.value.length === 0) {
        alert("内容不能为空");
    } else {
       //   将留言内容添加到列表中
       // 创建留言
       let str = `<li>${ev.currentTarget.value}</li>`;
       // 应该将最新的信息永远放在第一条
       list.insertAdjacentHTML("afterbegin", str);
       // 清空上一条留言
       ev.currentTarget.value = null;
}
}
};
</script>

字符串函数

• concat()拼装

let str = "html".concat(" css ", "php !");

• slice(start, end):取子串 按照索引位置计算

str = "hello php.cn";
//从起始位置开始 起始值0
let res = str.slice(0, 5);
console.log(res);
//输出hello
//负数是从结束位置开始 起始值-1
res = str.slice(-6, 9);

• substr(start, length)

//从0开始，取值长度5
res = str.substr(0, 5);

• trim():删除二端空格

let psw = "   root888    ";
console.log(psw.trim().length);

• splist将字符串打成数组

res = "admin@php.cn".split("@");
console.log(res[0]);
console.log(res[1]);