Javascript事件代理の真理

lijy91 發布于2019-08-19 17:32 / 1953人閱讀

摘要：參考資料事件代理很久很久以來，總感覺事件發生與事件代理到之間沒什么鳥區別。要搞清楚什么是事件代理，就需要先搞清楚什么是代理。，怎么從字面來理解事件代理一詞的含義后文有講。于是，看了事件代理的資料。這一過程被稱為事件冒泡。

參考資料：js-事件代理

很久很久以來，總感覺事件發生與事件代理到之間沒什么鳥區別。

最近，又看了一下，感覺區別其實真不大！看怎么理解吧。

要搞清楚什么是事件代理，就需要先搞清楚什么是代理。

從商業角度來講，代理就是：我有貨，你沒貨，但丫我沒時間、沒精力全部賣掉，而你一天閑的蛋疼，只剩下時間了。于是，我委托你幫我買，然后哥給你提成。這個過程中，你實際上相當于也有了貨。

OK，怎么從字面來理解事件代理一詞的含義？后文有講。

一先看一個真實的，新手綁定onclik事件的例子

如果按照之前的我，我會怎么給每一個li標簽，添加onlick呢？廢話，要是我，肯定簡單粗暴。
循環每一個li，然后全部綁定onlick。

于是我的代碼應該是這樣子：


   001
   002
   003

好像看起來沒問題了。雖然，有些文章說這樣很消耗性能，但是，我丫電腦好，老子管你性能，不能太認真。

二突然有一天，我發現通過js添加進來的新的li，沒有綁定onlcik

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

然后，點擊maomaoliang,它并沒有綁定我的onlick，這是為什么？
哦，原來，我原有的li跟我后面生成的li根本不是同時發生的，在創建新的li元素之前，已經給存在的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");
}

結果，點擊新的li，居然也觸發了fn函數。好吧，身為一個好奇心驅動的肉身，我怎么能不求甚解呢？還是要踏實點，搞清楚這其中的奧秘才行。

于是，看了事件代理的資料。

首先，要知道什么是事件冒泡：當一個元素上的事件被觸發的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡。

然后，再回到之前的問題“怎么從字面來理解事件代理一詞的含義”，誰代理了事件？或者事件代理了誰？
以本文的例子來講，看看改動后的代碼，我把onlick事件綁定到了ul標簽上面，而不是li標簽。于是，當我點擊任何一個li標簽（不管是動態生成的還是之前就有的）是，這個事件就像泡泡一樣，冒啊冒。由于我這里給ul綁定了onlick，那么這時，ul會捕獲冒泡上來的onclick事件。

接著， var target = ev.target || ev.srcElement;這一句話，相當于告訴了我，我究竟點的是誰，誰才是target。如果，這個target剛剛好就是li標簽if (target.nodeName.toLowerCase() == "li")，那么執行fn函數。

最后，我驕傲的回答了那個問題：ul標簽代理了onlick事件！

四回憶一下事件代理的步驟

父元素綁定事件

父元素知道事件的實際發生目標是誰

我們要對目標進行判斷，如果是我們需要的元素，則發生回調函數（所以要學好選擇器的使用）

五最后總結，事件代理兩大好處

性能不小心得到了優化

動態添加的元素也能綁定事件了

六需要注意的一點是

上述針對的是原生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標簽，也能綁click，是不是很方便、很簡單，是不是感覺學js沒什么卵用。
哈哈，這樣想很正常，我以前也這么想，但是，做了一些東西之后，發現jquery還真的不夠用了！但是基本夠用！
雖然，大神們都說要學js，但我還是覺得可以先學jquery，之后再學js，效果也可以的。

大神嘛，哪懂叼絲的痛楚。-。-

GPU云服務器云服務器 Javascript事件代理事件代理 javascript事件 javascript鍵盤事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78611.html

網頁與瀏覽器窗口の真理

摘要：參考資料首先，網頁大小與瀏覽器窗口大小從來都不是一回事這尼瑪最近才明白，坑所以，要知道以下常網頁的范圍我們在代碼里面設置的或者腳本，改變的樣式就是網頁范圍下的改變，也就是說，我們設置的大小是網頁的不是瀏覽器窗口的大小。參考資料首先，網頁大小與瀏覽器窗口大小從來都不是一回事！！！這尼瑪最近才明白，坑~ 所以，要知道以下常: 網頁的范圍我們在代碼里面設置的CSS或者js腳本，改變的樣式...

tinysun1234 2019-08-30 12:44 評論0 收藏0
JavaScript の客戶端檢測

摘要：博文模塊增強模式進行客戶端檢測標簽博文常用的檢測方式為能力檢測用戶代理檢測這里有用戶代理檢測檢測插件非瀏覽器是一個包含瀏覽器插件的數組這個數組的每一項都包含插件的名字插件的描述插件的文件名插件所處理的類型數量檢測插件在中無效方法用于把字符串 [博文]模塊增強模式進行客戶端檢測標簽：博文常用的檢測方式為: [ ] 1 . 能力檢測 [ ] 2 . 用戶代理檢測這里有 2 ...

KnewOne 2019-08-20 17:44 評論0 收藏0
【呆萌の研究】JavaScriptの閉包

摘要：為什么會產生閉包究其根本，是因為代表的函數包含的作用域。而在作用域鏈中，外部函數的活動對象始終處于第二位，外部函數的外部函數的活動對象處于第三位直到作為作用域鏈終點的全局執行環境。前言此文的內容主要是來自看書的總結+小小的實踐哦~會不斷更新總結。什么是閉包書上是這樣定義閉包的：有權訪問另一個函數作用域中變量的函數。舉一個例子： function test(){ va...

CHENGKANG 2019-08-26 11:47 評論0 收藏0
何為語法樹

摘要：原文鏈接何為語法樹什么是語法樹你是否曾想過，這個世界存在這么多語言的意義。語法樹，計算機描述世界真理的樹狀結構。不同的語言，都會配之不同的語法分析器，而語法分析器是把源代碼作為字符串讀入解析，并建立語法樹的程序。原文鏈接：BlueSun | 何為語法樹什么是語法樹？你是否曾想過，這個世界存在這么多語言的意義。假如現在你面前有一個物體，它是一個不規則的圓體，整個身體通紅，頭部還有...

hikui 2019-08-19 17:52 評論0 收藏0