資訊專欄INFORMATION COLUMN
摘要：事件捕獲會(huì)從開始觸發(fā)，一級(jí)一級(jí)往下傳遞，依次觸發(fā)，直到真正事件目標(biāo)為止。父元素子元素事件代理原理事件冒泡機(jī)制。當(dāng)子結(jié)點(diǎn)觸發(fā)事件時(shí)，事件流會(huì)向父節(jié)點(diǎn)傳播，并觸發(fā)父節(jié)點(diǎn)上的事件。
場(chǎng)景:一個(gè)頁(yè)面中的導(dǎo)航欄/圖片下拉框，具有多個(gè)相同的標(biāo)簽節(jié)點(diǎn)，可以獲取點(diǎn)擊的某一個(gè)，并封裝對(duì)應(yīng)的方法函數(shù)（不考慮IE）
需要考慮的步驟:
（1）事件代理的原理（事件冒泡）
（2）函數(shù)中需要考慮的幾點(diǎn)（默認(rèn)行為，this指向）
1.事件捕獲和事件冒泡
DOM是一種樹形結(jié)構(gòu)，事件會(huì)在元素結(jié)點(diǎn)和根結(jié)點(diǎn)之間傳遞，途經(jīng)的結(jié)點(diǎn)會(huì)收到該事件，傳遞過(guò)程可以稱為事件流。
事件流分為三個(gè)階段：
捕獲階段
目標(biāo)階段
冒泡階段
事件冒泡會(huì)從當(dāng)前觸發(fā)的事件目標(biāo)一級(jí)一級(jí)往上傳遞，依次觸發(fā)，直到document為止。
事件捕獲會(huì)從document開始觸發(fā)，一級(jí)一級(jí)往下傳遞，依次觸發(fā)，直到真正事件目標(biāo)為止。
window->document->HTML->body->父元素->子元素
2.事件代理
（1）原理：事件冒泡機(jī)制。當(dāng)子結(jié)點(diǎn)觸發(fā)事件時(shí)，事件流會(huì)向父節(jié)點(diǎn)傳播，并觸發(fā)父節(jié)點(diǎn)上的事件。
（2）優(yōu)點(diǎn)：
代碼簡(jiǎn)潔，當(dāng)動(dòng)態(tài)增加結(jié)點(diǎn)時(shí)，無(wú)需做額外操作
減少綁定注冊(cè)事件，減少瀏覽器內(nèi)存消耗
3.函數(shù)實(shí)現(xiàn)
（1）實(shí)現(xiàn)一次事件冒泡
- 標(biāo)簽1
- 標(biāo)簽2
- 標(biāo)簽3
/*
*
* 事件冒泡
*
*/
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn);
}
var paras = document.getElementById("para")
var contains = document.getElementById("contain")
var p1s = document.getElementById("p1")
console.log(paras, contains, p1s)
bindEvent(p1s, "click", function(e) {
e.preventDefault()
//阻止事件冒泡 e.stopPropagation() e.cancelBubble = true IE
console.log("p")
})
bindEvent(paras, "click", function(e) {
console.log("para")
})
可以看到，當(dāng)點(diǎn)擊標(biāo)簽的時(shí)候，結(jié)點(diǎn)的父元素也觸發(fā)了對(duì)應(yīng)的方法。
（2）實(shí)現(xiàn)事件代理
/*
*
* 事件代理
*
*/
function eventProxy(elem, type, proxyElem, fn) {
if(fn === null) { // 不使用事件代理
fn = proxyElem;
proxyElem = null;
}
elem.addEventListener(type, function(e) {
var target;
if(proxyElem) { // 使用事件代理的情況
target = e.target;
console.log(target)
if (target.matches(proxyElem)) {
fn.call(target, e); // 改變函數(shù)this執(zhí)行上下文到目標(biāo)結(jié)點(diǎn)
}
} else { // 不使用事件代理的情況
fn(e);
}
})
}
var proxyContainer = document.getElementById("proxy");
eventProxy(proxyContainer, "click", "a" , function(e) {
e.preventDefault();
console.log(this.innerHTML); // 獲取當(dāng)前結(jié)點(diǎn)信息
})
可以看到，通過(guò)事件代理的方式，將事件綁定在父節(jié)點(diǎn)上，并可以區(qū)分被點(diǎn)擊分子節(jié)點(diǎn)的信息。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106101.html
摘要：希望在做所有事情之前，操作文檔。不受層級(jí)限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當(dāng)前對(duì)象中的某個(gè)元素是否包含指定類名，包含返回，不包含返回下標(biāo)過(guò)濾器精確選出指定下標(biāo)元素獲取第個(gè)元素。 原文鏈接 http://blog.poetries.top/2016... 首先，來(lái)了解一下jQuery學(xué)習(xí)的整體思路 showImg(https://seg...
摘要：表示沒有對(duì)象，即該處不應(yīng)該有值。閉包的形成允許使用內(nèi)部函數(shù)，可以將函數(shù)定義和函數(shù)表達(dá)式放在另一個(gè)函數(shù)的函數(shù)體內(nèi)。使用閉包可以減少全局環(huán)境的污染，也可用延續(xù)變量的生命。所以在閉包不用之后，將不使用的局部變量刪除，使其被回收。 1.javaScript的數(shù)據(jù)類型有什么 Undefined、Null、Boolean、Number、String 2.檢測(cè)數(shù)據(jù)類型有什么方法 typeof typ...
摘要：線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。從邏輯角度來(lái)看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。 關(guān)于js 1.原型鏈 2.AJAX請(qǐng)求數(shù)據(jù)時(shí)解決緩存的辦法3.js的繼承 ...
摘要：前言本篇文章是基礎(chǔ)知識(shí)的篇，如果前面的基礎(chǔ)知識(shí)入門篇看完了，現(xiàn)在就可以學(xué)習(xí)了?；靖拍罘譃槿齻€(gè)部分。在這個(gè)基礎(chǔ)上使用一些新特性，高級(jí)瀏覽器支持，低級(jí)瀏覽器不支持。在對(duì)象中的屬性是一個(gè)布爾值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言 本篇文章是JavaS...
摘要：異步編程，不同于同步編程的請(qǐng)求響應(yīng)模式，其是一種事件驅(qū)動(dòng)編程，請(qǐng)求調(diào)用函數(shù)或方法后，無(wú)需立即等待響應(yīng)，可以繼續(xù)執(zhí)行其他任務(wù)，而之前任務(wù)響應(yīng)返回后可以通過(guò)狀態(tài)通知和回調(diào)來(lái)通知調(diào)用者。 異步與單線程知識(shí)點(diǎn)： 什么是異步(對(duì)比同步) 同步：一行一行按順序依次執(zhí)行代碼，當(dāng)前代碼任務(wù)耗時(shí)執(zhí)行會(huì)阻塞后續(xù)代碼的執(zhí)行。這是一種典型的請(qǐng)求-響應(yīng)模型，當(dāng)請(qǐng)求調(diào)用一個(gè)函數(shù)或方法后，需等待其響應(yīng)返回，然后執(zhí)...
閱讀 1872·2023-04-26 01:58
閱讀 1993·2019-08-30 11:26
閱讀 2737·2019-08-29 12:51
閱讀 3505·2019-08-29 11:11
閱讀 1192·2019-08-26 11:54
閱讀 2106·2019-08-26 11:48
閱讀 3489·2019-08-26 10:23
閱讀 2391·2019-08-23 18:30
