js 事件委託

2022-03-16 11:37:45 字數 1429 閱讀 1311

最近在看 vue 的輪播外掛程式的時候想起以前也寫過乙個小 demo,翻當初的**的時候腦中一直冒出「事件委託」這樣的概念,於是順手查了點資料,重構了下這個demo,權當複習。

從字面意思上理解就是把事件委託給其他元素,由他們代為執行。

那為什麼需要其他元素代為執行事件**呢?先看下面的例子:

// index.html12

345// js

for (var i = 0, len = spans.length; i < len; i++)

})(i);

}

場景很簡單,輪播圖下方一般都會有顯示進度的點,當點選這些點的時候可以跳轉到對應的上,於是需要對這些點註冊 onclick 事件,就像上面例子中的 for 迴圈。當然這個場合下使用迴圈來繫結註冊事件並沒多大的影響。

但是如果換成瀑布流布局呢?並且,瀑布流中的元素需要動態生成,每重新獲取一次就動態繫結註冊一次?這樣我想使用者體驗也會差吧。

因此,就可以使用事件委託來處理,開局只需繫結一次父元素,後面子元素無論增刪,都可以自動繫結,並且,不需要 for 迴圈了,效能提公升效果顯著。

於是,上面的例子可以改寫成:

buttons.onclick = function(ev)
事件捕獲: 當滑鼠點選或者觸發dom事件時(被觸發dom事件的這個元素被叫作事件源),瀏覽器會從根節點 =>事件源(由外到內)進行事件傳播。

事件冒泡:事件源 =>根節點(由內到外)進行事件傳播。

捕獲和冒泡的流程中所有經過的節點,都會觸發對應的事件。

dom標準事件流的觸發的先後順序為:先捕獲再冒泡。即當觸發dom事件時,會先進行事件捕獲,捕獲到事件源之後通過事件傳播進行事件冒泡。

上例中,使用 onclick 的方式進行註冊繫結的事件會發生在事件冒泡的過程中。即事件源上註冊的事件先執行,依次向 window 物件擴散。

那麼有沒有辦法在事件捕獲的階段執行**函式呢? addeventlistener 這個api可以實現。

element.addeventlistener(eventtype, function(e) , usecapture);
第乙個引數是必須的,string型別,表示事件名,如 『click』;

第三個引數 usecapture 可以決定在何階段執行。預設 false,表示在冒泡階段呼叫事件處理函式,如果設定為 true,表明會在捕獲階段呼叫。

使用  onclick 的方式進行事件註冊繫結,如果存在多個事件的話,後註冊的事件會覆蓋先註冊的事件,而使用 addeventlistener 方式進行註冊,會按照註冊順序執行,並不存在覆蓋。

js 和 css3 分別實現的輪播圖:demo-slide。

js事件委託

乙個ul列表,裡邊有乙個1000個li元素,如何為這1000個li元素新增click事件?function false 參考文章 作為閉包使用的 function 已知ab兩個有序陣列,a陣列長度m,b陣列長度n,請最多迴圈m n次找出a,b陣列中相同的元素 對 事件處理程式過多 問題的解決方案就是...

js事件委託

事件委託 通俗的講把自己應該做的事情交給別人去做,也就是利用冒泡原理,把這個這個事件交給父級或祖先去觸發執行效果。用例項來說。需求是這樣的 滑鼠放到li上對應的li背景變灰。利用事件冒泡實現 ul on mouseover function e 也許有人會說,我們直接給所有li都綁上事件也可以啊,一...

js事件委託

在給多個標籤定義乙個事件的時候我們不會給每個dom都新增乙個事件浪費很多的資源,為此可以使用js的事件委託。在圖靈社群上給事件委託是這樣定義的 事件委託就是事件目標自身不處理事件,把事件委託給父元素或者祖先元素,甚至根元素。這裡註明文章出處 自己寫了乙個demo 給ul下的每個li新增乙個click...