事件的几种添加方式和删除方法及事件委托的实现

JS 事件的几种添加方式和删除方法及事件委托的实现

JS 事件的添加方法

1.属性方式：直接在 html 标签中添加事件属性。

<button onclick="alert('标签属性方式添加事件')">属性方式</button>

2.对象方式：在元素对象上添加事件，这种方式添加的事件会覆盖前面的(非事件监听器添加的)同名事件。

document.querySelector("button").onclick = () => alert("对象方式添加的事件");

3.事件监听器方式:在对象的事件监听列表中添加监听事件，这种方式添加的事件不会覆盖前面的同名事件。

document
  .querySelector("button")
  .addEventListener("click", () => alert("事件监听器方式添加的事件"));

4.自定义事件（事件派发）

document
  .querySelector("button")
  .addEventListener("testEvent", alert("自定义事件(事件派发)"));
//触发自定义事件(事件派发)
document.querySelector("button").dispatchEvent(new Event("testEvent"));

事件删除

1.删除属性方式和对象方式添加的事件：

document.querySelector("button").onclick = null;

2.删除事件监听器添加的事件：如果事件监听器添加的事件处理函数是匿名函数，则无法删除，因为没有函数名。所以这里只能删除拥有非匿名处理函数的事件。

//声明事件处理函数f1
let f1 = () => alert("事件监听器方式添加的事件1");
//事件监听器方式给onclick事件添加一个事件处理函数f1
document.querySelector("button").addEventListener("click", f1);
//删除事件监听列表中的onclick事件的f1这个处理函数
document.querySelector("button").removeEventListener("click", f1);

---

事件委托

事件冒泡：当事件在某个元素上被触发之后，会沿着 DOM 树逐级触发父元素的同名事件。

事件委托（事件代理）：依据冒泡原理，只需要在某一级父元素上指定一个事件处理程序，就可以管理某一类型的所有事件。

HTML 代码：

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

示例：点击某个 li 时，改变其背景色

1.普通(非事件代理)模式：在每个 li 上添加点击事件

document
  .querySelectorAll("li")
  .forEach(
    (li) => (li.onclick = (ev) => (ev.target.style.backgroundColor = "yellow"))
  );

2.事件代理模式：只要在 ul 上添加点击事件，就能实现管理所有 li 的点击事件

document.querySelector("ul").onclick = (ev) =>
  (ev.target.style.backgroundColor = "yellow");

---

fetch API

fetch()方法，可以发起对远程资源的请求，用来替代原来的 XMLHttpRequest 对象。

应用示例：
用 json.data 文件模拟批量数据

//json.data 内容
[
  { name: "张三", sex: "male", age: 32 },
  { name: "李四", sex: "male", age: 28 },
  { name: "小美", sex: "famale", age: 19 },
  { name: "大漂亮", sex: "famale", age: 23 },
  // ...
];

const request = async () => {
  try {
    //默认GET方式请求
    const response = await fetch("json.data");
    if (response.ok) {
      const jsonData = await response.json();
      console.log(jsonData);
      //...后续处理jsonData数据;
    }
  } catch (ex) {
    console.log(ex);
  }
};
request();