資訊專欄INFORMATION COLUMN
摘要：參考資料事件代理很久很久以來，總感覺事件發(fā)生與事件代理到之間沒什么鳥區(qū)別。要搞清楚什么是事件代理，就需要先搞清楚什么是代理。，怎么從字面來理解事件代理一詞的含義后文有講。于是，看了事件代理的資料。這一過程被稱為事件冒泡。
參考資料：js-事件代理
很久很久以來，總感覺事件發(fā)生與事件代理到之間沒什么鳥區(qū)別。
最近，又看了一下，感覺區(qū)別其實真不大！看怎么理解吧。
要搞清楚什么是事件代理，就需要先搞清楚什么是代理。
從商業(yè)角度來講，代理就是：我有貨，你沒貨，但丫我沒時間、沒精力全部賣掉，而你一天閑的蛋疼，只剩下時間了。于是，我委托你幫我買，然后哥給你提成。這個過程中，你實際上相當(dāng)于也有了貨。
OK，怎么從字面來理解事件代理一詞的含義？后文有講。
一 先看一個真實的，新手綁定onclik事件的例子如果按照之前的我，我會怎么給每一個li標(biāo)簽，添加onlick呢？廢話，要是我，肯定簡單粗暴。
循環(huán)每一個li，然后全部綁定onlick。
于是我的代碼應(yīng)該是這樣子：
好像看起來沒問題了。雖然，有些文章說這樣很消耗性能，但是，我丫電腦好，老子管你性能，不能太認(rèn)真。
二 突然有一天，我發(fā)現(xiàn)通過js添加進(jìn)來的新的li，沒有綁定onlcikvar node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);
然后，點擊maomaoliang,它并沒有綁定我的onlick，這是為什么？
哦，原來，我原有的li跟我后面生成的li根本不是同時發(fā)生的，在創(chuàng)建新的li元素之前，已經(jīng)給存在的li加事件了。好吧，好煩啊。
然后，又好（無）奇（奈）的看了一些文章，原來有個叫事件代理的東西可以用。我就試試看吧！于是改寫了部分代碼，像這樣：
var thl= document.getElementById("thl");
thl.onclick = function(ev) {
ev = ev || event;
//兼容處理
var target = ev.target || ev.srcElement;
//找到li元素
if (target.nodeName.toLowerCase() == "li") {
fn();
}
};
function fn (){
console.log("maomaoliang");
}
結(jié)果，點擊新的li，居然也觸發(fā)了fn函數(shù)。好吧，身為一個好奇心驅(qū)動的肉身，我怎么能不求甚解呢？還是要踏實點，搞清楚這其中的奧秘才行。
于是，看了事件代理的資料。
首先，要知道什么是事件冒泡：當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡。
然后，再回到之前的問題“怎么從字面來理解事件代理一詞的含義”，誰代理了事件？或者事件代理了誰？
以本文的例子來講，看看改動后的代碼，我把onlick事件綁定到了ul標(biāo)簽上面，而不是li標(biāo)簽。于是，當(dāng)我點擊任何一個li標(biāo)簽（不管是動態(tài)生成的還是之前就有的）是，這個事件就像泡泡一樣，冒啊冒。由于我這里給ul綁定了onlick，那么這時，ul會捕獲冒泡上來的onclick事件。
接著， var target = ev.target || ev.srcElement;這一句話，相當(dāng)于告訴了我，我究竟點的是誰，誰才是target。如果，這個target剛剛好就是li標(biāo)簽if (target.nodeName.toLowerCase() == "li")，那么執(zhí)行fn函數(shù)。
最后，我驕傲的回答了那個問題：ul標(biāo)簽代理了onlick事件！
四 回憶一下事件代理的步驟父元素綁定事件
父元素知道事件的實際發(fā)生目標(biāo)是誰
我們要對目標(biāo)進(jìn)行判斷，如果是我們需要的元素，則發(fā)生回調(diào)函數(shù)（所以要學(xué)好選擇器的使用）
五 最后總結(jié)，事件代理兩大好處性能不小心得到了優(yōu)化
動態(tài)添加的元素也能綁定事件了
六 需要注意的一點是上述針對的是原生js事件綁定來講的，如果你用到了jquery。并把代碼改成了如下的樣子：
/*var thl= document.getElementById("ul1");
thl.onclick = function(ev) {
ev = ev || event;
//兼容處理
var target = ev.target || ev.srcElement;
//找到li元素
if (target.nodeName.toLowerCase() == "li") {
//li添加的事件
fn();
}
};*/
var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);
function fn (){
console.log("maomaoliang");
}
$("#ul1").click(function(){
fn();
});
這樣一來，新添加的li標(biāo)簽，也能綁click，是不是很方便、很簡單，是不是感覺學(xué)js沒什么卵用。
哈哈，這樣想很正常，我以前也這么想，但是，做了一些東西之后，發(fā)現(xiàn)jquery還真的不夠用了！但是基本夠用！
雖然，大神們都說要學(xué)js，但我還是覺得可以先學(xué)jquery，之后再學(xué)js，效果也可以的。
大神嘛，哪懂叼絲的痛楚。-。-
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78611.html
摘要：參考資料首先，網(wǎng)頁大小與瀏覽器窗口大小從來都不是一回事這尼瑪最近才明白，坑所以，要知道以下常網(wǎng)頁的范圍我們在代碼里面設(shè)置的或者腳本，改變的樣式就是網(wǎng)頁范圍下的改變，也就是說，我們設(shè)置的大小是網(wǎng)頁的不是瀏覽器窗口的大小。 參考資料 首先，網(wǎng)頁大小與瀏覽器窗口大小從來都不是一回事?。?！這尼瑪最近才明白，坑~ 所以，要知道以下常: 網(wǎng)頁的范圍我們在代碼里面設(shè)置的CSS或者js腳本，改變的樣式...
摘要：博文模塊增強(qiáng)模式進(jìn)行客戶端檢測標(biāo)簽博文常用的檢測方式為能力檢測用戶代理檢測這里有用戶代理檢測檢測插件非瀏覽器是一個包含瀏覽器插件的數(shù)組這個數(shù)組的每一項都包含插件的名字插件的描述插件的文件名插件所處理的類型數(shù)量檢測插件在中無效方法用于把字符串 [博文]模塊增強(qiáng)模式進(jìn)行客戶端檢測 標(biāo)簽： 博文 常用的檢測方式為: [ ] 1 . 能力檢測 [ ] 2 . 用戶代理檢測 這里有 2 ...
摘要：為什么會產(chǎn)生閉包究其根本，是因為代表的函數(shù)包含的作用域。而在作用域鏈中，外部函數(shù)的活動對象始終處于第二位，外部函數(shù)的外部函數(shù)的活動對象處于第三位直到作為作用域鏈終點的全局執(zhí)行環(huán)境。 前言 此文的內(nèi)容主要是來自看書的總結(jié)+小小的實踐哦~會不斷更新總結(jié)。 什么是閉包 書上是這樣定義閉包的： 有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)。 舉一個例子： function test(){ va...
閱讀 3132·2021-11-10 11:36
閱讀 3328·2021-10-13 09:40
閱讀 6162·2021-09-26 09:46
閱讀 676·2019-08-30 15:55
閱讀 1424·2019-08-30 15:53
閱讀 1593·2019-08-29 13:55
閱讀 3007·2019-08-29 12:46
閱讀 3223·2019-08-29 12:34
