JavaScript中的事件委託機制跟深淺拷貝
阿新 • • 發佈:2021-01-19
今天聊下JavaScript中的事件委託跟深淺拷貝
# 一、事件委託
## 首先呢,介紹一下事件繫結
```html
//方法一:通過onclick
//方法二:通過addEventListener
```
說下其中的區別
onclick只能繫結一個事件,而addEventListener可以同時繫結多個事件
```js
function method1() {
console.log("method1");
}
function method2() {
console.log("method2");
}
function method3() {
console.log("method3");
}
var btn = document.getElementById("btn_button");
btn.addEventListener("click", method1, false);//第三個引數是預設值,預設是冒泡,如果設定為true則是捕獲
btn.addEventListener("click", method2, false);
btn.addEventListener("click", method3, false);
//最終會按順序執行:method1 -> method2 -> method3
btn.removeEventListener("click", method1, false);//用於移除事件
btn.onclick = method1;
btn.onclick = method2;
btn.onclick = method3;
//最終只會執行method3
btn.onclick = null;//用於移除事件
```
## 事件冒泡
```html
“title3” -> “container”
## 事件捕獲
至於事件冒泡倒過來即是事件捕獲,即:點選 “title3裡面的文字” 會觸發 3 次事件,分別 彈出
“container” -> “title3” -> “title3inner”
## 事件冒泡的昇華
事件委託的使用
```html
- 123456
- qwert
-
- title3裡面的文字
- 123456
- qwert
- QWE123