一直覺得自己對事件委託理解的挺深刻，今天遇到的場景，翻遍了各種資料也沒有找到答案，才加深了對事件委託的進一步理解。

事情是這樣的....（需求是這樣的）

一 應用場景

有一個ul，點選一個按鈕，動態的新增li，li裡面有兩個div，這兩個div都有一個事件。但是div1得先觸發，div2才顯示出來，然後點選div2，div2消失。需求聽起來很簡單，coding如下：

然後愉快的點選Add，先添加了幾組li，效果如下：

緊接著點選第一個AAAA,效果也正常，AAAA後面那個div的hide顯示出來了，如下:

然後，再點選hide，沒反應！！！

二 分析原因

看了下自己寫的程式碼，覺得沒問題啊，aa和bb都把事件委託給了共同的父類ul,沒毛病啊。

然後就一通搜尋，發現度娘上根本沒有這個問題，關鍵詞找遍了反正是.....

最後不得已，才仔細的琢磨這段程式碼，發現了一個驚人的祕密！同一個父元素被委託了相同的click事件！我的神呀，他也就是個程式語言，會被我混亂的思維搞壞的，委託了相同的click事件，那誰能告訴它監聽到這個事件後到底應該做什麼？所以，不同的瀏覽器會根據不同的規則進行操作。有的會先來的先委託，直接捨棄第二個委託事件，就是本例中的現象。我還把程式碼跑在瀏覽器中，發現第二個直接覆蓋了第一個，連點選第一下的時候hide都出不來。

三 來，一起修改一下

搞清楚了原因，那我們就要避免這種寫法，讓第一個委託事件被點選後再新增第二個,並且在新增第二個之前把第一個事件委託取消。同理，在第二個事件委託後再呼叫新增第一個，並在第一個事件委託前清除第二個事件委託。具體程式碼如下。

以上就是關於事件委託踩的一個坑，感覺最終的實現不是特別優雅，後續有長進了會再來補充...