濟南做網(wǎng)站的網(wǎng)絡(luò)公司西安seo服務(wù)公司排名
提示：事件捕獲，事件冒泡，事件委托
目錄
事件模型(DOM事件流)
1.事件是什么
2.事件流
1).事件流的三個階段
3.參考代碼
二、事件委托
1.概念
2.使用案例
3.阻止冒泡行為
事件模型(DOM事件流)
1.事件是什么
1). 事件是HTML和Javascript交互的驅(qū)動器, 事件是文檔或者瀏覽器窗口中發(fā)生的，特定的交互瞬間。
?2), 事件是用戶或瀏覽器自身執(zhí)行的某種動作，如 click,load 和 mouseover 都是事件的名字。
3). 事件是 javaScript 和 DOM 之間交互的橋梁。
2.事件流
事件流, 即是一個事件發(fā)生的流程或者說流轉(zhuǎn), 從開始到結(jié)束, 都發(fā)生了什么
事件發(fā)生時會在元素節(jié)點之間按照特定的順序傳播,這個傳播過程,我們就稱之為DOM事件流.
1).事件流的三個階段
1. 捕獲階段 Capture Phase; 從上到下, 層層傳遞, 直到目標接收
2. 目標階段 Target Phase; 確認目標, 進行處理
3. 冒泡階段 Bubbling Phase; 處理結(jié)束, 往上傳遞.
注意:
1. JS建議執(zhí)行捕獲或者冒泡兩個階段中的其中一個階段
2. 傳統(tǒng)綁定事件方式跟attachEvent綁定事件的方式只能得到冒泡階段
3. addEventListener(type,listener,[,useCapture])第三個參數(shù)如果是true,表示在事件捕獲階段調(diào)用事件處理程序; ?如果是false(默認不寫就是false),表示事件冒泡階段調(diào)用事件處理程序.
?4. 實際開發(fā)中我們很少使用事件捕獲,我們更關(guān)注事件冒泡.
5. 另外需要注意, 不是所有事件都會冒泡的, 有些事件是沒有冒泡的,比如onmouseenter,onmouseleave
6. 事件冒泡有時候會帶來麻煩,有時候又會幫助我們很巧妙的做某些事件,我們會學習事件委托,事件委托(事件代理)的原理就是事件冒泡
7.監(jiān)聽綁定方式addEventListener()方法中第三個參數(shù)可以控制是在冒泡階段觸發(fā)還是在捕獲階段觸發(fā)
3.參考代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#father {width: 400px;height: 400px;background: orange;margin: 50px auto;padding: 20px;border: 10px solid red;}#father #son {width: 150px;height: 150px;background: skyblue;}</style>
</head><body><div id="father"><div id="son">son元素</div></div><script>var son = document.getElementById("son");var father = document.getElementById("father");// son.onclick = function () {// console.log("son元素的click事件");// }// father.onclick = function () {// console.log("father元素的click事件");// }// document.body.onclick = function () {// console.log("body元素的click事件");// }// document.documentElement.onclick = function () {// console.log("html元素的click事件");// }// document.onclick = function () {// console.log("document元素的click事件");// }// window.onclick = function () {// console.log("window元素的click事件");// }/* son.attachEvent("onclick", function () {console.log("son元素的click事件");});father.attachEvent("onclick", function () {console.log("father元素的click事件");});document.body.attachEvent("onclick", function () {console.log("body元素的click事件");})document.documentElement.attachEvent("onclick", function () {console.log("html元素的click事件");});document.attachEvent("onclick", function () {console.log("document元素的click事件");});window.attachEvent("onclick", function () {console.log("window元素的click事件");}); */son.addEventListener("click", function () {console.log("son元素的click事件");},);father.addEventListener("click", function () {console.log("father元素的click事件");});document.body.addEventListener("click", function () {console.log("body元素的click事件");})document.documentElement.addEventListener("click", function () {console.log("html元素的click事件");});document.addEventListener("click", function () {console.log("document元素的click事件");});window.addEventListener("click", function () {console.log("window元素的click事件");});/* son.addEventListener("click", function () {console.log("son元素的click事件");}, false);father.addEventListener("click", function () {console.log("father元素的click事件");}, false);document.body.addEventListener("click", function () {console.log("body元素的click事件");}, false);document.documentElement.addEventListener("click", function () {console.log("html元素的click事件");}, false);document.addEventListener("click", function () {console.log("document元素的click事件");}, false);window.addEventListener("click", function () {console.log("window元素的click事件");}, false); *//* son.addEventListener("click", function () {console.log("son元素的click事件");}, true);father.addEventListener("click", function () {console.log("father元素的click事件");}, true);document.body.addEventListener("click", function () {console.log("body元素的click事件");}, true);document.documentElement.addEventListener("click", function () {console.log("html元素的click事件");}, true);document.addEventListener("click", function () {console.log("document元素的click事件");}, true);window.addEventListener("click", function () {console.log("window元素的click事件");}, true); */// son.onmouseover = function () {// console.log("son元素的mouseover事件");// }// father.onmouseover = function () {// console.log("father元素的mouseover事件");// }// document.body.onmouseover = function () {// console.log("body元素的mouseover事件");// }// document.documentElement.onmouseover = function () {// console.log("html元素的mouseover事件");// }// document.onmouseover = function () {// console.log("document元素的mouseover事件");// }// window.onmouseover = function () {// console.log("window元素的mouseover事件");// }/* son.onmouseenter = function () {console.log("son元素的mouseenter事件");}father.onmouseenter = function () {console.log("father元素的mouseenter事件");}document.body.onmouseenter = function () {console.log("body元素的mouseenter事件");}document.documentElement.onmouseenter = function () {console.log("html元素的mouseenter事件");}document.onmouseenter = function () {console.log("document元素的mouseenter事件");}window.onmouseenter = function () {console.log("window元素的mouseenter事件");} */</script>
</body></html>二、事件委托
1.概念
事件委托又叫事件代理, 就是不給子元素綁定事件，給父輩元素綁定事件，把處理代碼在父輩元素的事件中執(zhí)行。 事件委托的原理是利用事件冒泡，?嵌套關(guān)系的元素,才可能會有事件冒泡， 事件委托一般用來給未來動態(tài)添加的元素綁定事件
2.使用案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}ul,ol {list-style: none;}ul,ol {display: flex;}ul li,ol li {margin: 10px 15px;cursor: pointer;}ul li.active,ol li.active {color: red;font-weight: bold;}</style>
</head><body><ul><li class="active">導(dǎo)航1</li><li>導(dǎo)航2</li><li>導(dǎo)航3</li><li>導(dǎo)航4</li><li>導(dǎo)航5</li></ul><script>// 1) 獲取所有的li標簽var ul = document.querySelector("ul");var items = document.querySelectorAll("ul li");// 2) 循環(huán)標簽數(shù)組for (var i = 0; i < items.length; i++) {// 3) 事件綁定items[i].onclick = function () {for (var j = 0; j < items.length; j++) {items[j].className = ""}this.className = "active";}}// 創(chuàng)建一個li標簽var li = document.createElement("li");li.innerHTML = "導(dǎo)航6";ul.appendChild(li);</script><ol><li class="active">導(dǎo)航1</li><li>導(dǎo)航2</li><li>導(dǎo)航3</li><li>導(dǎo)航4</li><li>導(dǎo)航5</li></ol><script>// 1) 獲取ol標簽var ol = document.querySelector("ol");// 2) 父元素綁定事件ol.onclick = function (event) {// 獲取事件源var el = event.target;console.dir(event);// console.log("el:",el);// console.dir(el);// 判斷點擊的標簽是否為li標簽if (el.tagName === "LI") {for (var j = 0; j < ol.children.length; j++) {// ol.children[j].className = "";ol.children[j].classList.remove("active");}// 設(shè)置當前點擊標簽的類名// el.className = "active";el.classList.add("active");}}// 創(chuàng)建一個li標簽var li = document.createElement("li");li.innerHTML = "導(dǎo)航6";ol.appendChild(li);</script></body></html>3.阻止冒泡行為
e.stopPropagation()//阻止冒泡行為