javaScript 事件代理10分鐘到精通

直接上圖:

1.事件冒泡

javaScript 事件代理10分鐘到精通

說明:inner盒子被嵌套再outer盒子內部,兩個盒子都綁定點擊事件的事件處理函數。

點擊inner盒子的結果:inner的點擊事件處理函數執行後,outer的點擊事件處理函數也被執行了。

結論:點擊inner時,outer的點擊事件也會被觸發。

javaScript 事件代理10分鐘到精通


講解:事件冒泡是由一個元素的事件被觸發而發生,該元素的這個事件會一級一級向父級傳遞並觸發直到body,既然這些父級元素的這個事件都會被觸發,那麼這些父級元素的這個事件所綁定的事件處理函數就會被執行,這種事件向父級元素傳遞觸發的現象叫事件冒泡。

2、事件對象與事件源對象

廢話不多說,先上圖

javaScript 事件代理10分鐘到精通

說明:我們在outer內部寫了4個盒子,並給每個盒子綁定點擊事件處理函數,根據事件冒泡現象來判斷,雖然我們現在在物理的角度上無法點擊到outer了,但是點擊4個inner盒子,觸發自己的點擊事件的同時,這個點擊事件依然會向outer盒子傳遞,並執行outer的點擊事件處理函數。

我們想完成『點擊哪個inner盒子,就打印出哪個盒子的編號』這個功能,非要給每個inner盒子綁定點擊事件處理函數嗎?答案:肯定不是的。

這裡我們引出兩個事件對象與事件源對象。

看下圖:

javaScript 事件代理10分鐘到精通

事件對象:事件發生的那一刻,所有被記錄的信息(鼠標的座標系,點擊到的哪個元素)等都會被記錄到一個對象當中,這個對象就是事件對象。

獲取事件對象的方式:

IE瀏覽器:window.event

其他瀏覽器:事件處理函數的第一個參數event

事件對象中保存著一個無比重要的東西:事件源對象

事件源是什麼呢?它被保存在事件對象中,它保存著事件作用的元素(比如點擊在具體哪個元素上),它也是一個對象,所以叫事件源對象。

javaScript 事件代理10分鐘到精通

這兩個東西保存在事件對象中,訪問的方式:

e.target || e.srcElement

IE瀏覽器:e.srcElement

其他瀏覽器:e.target

接下來我們來看看,如何通過outer的點擊事件處理函數找到事件源對象

javaScript 事件代理10分鐘到精通

通過事件源對象來獲取到事件具體作用在哪個元素上,那麼我們就可以通過事件源來得到該元素的類名。

javaScript 事件代理10分鐘到精通

接下來我們通過判斷className來分別執行不同的程序

javaScript 事件代理10分鐘到精通

總結一下:給父級盒子outer綁定事件處理函數,但是我的目標是點擊4個inner盒子分別打印出相應的編號,本身應該給4個inner綁定事件處理函數的,由於事件冒泡,點擊4個inner盒子,點擊事件會冒泡到outer上並執行outer的點擊事件處理函數,那麼接下來我們可以通過事件對象與事件源對象獲取到當前點擊的元素的類名,通過對類名的判斷打印相應的編號,這樣由父級做事件的代理方,實際完成的是子元素事件任務的方式,我們叫做事件代理,或者事件委託。

事件代理的應用場景:

簡單的說,所有列表項功能或者,盒子內部的元素有相同的事件需要觸發執行不同的任務的情況下,都應該使用時間代理。

例子:列表項刪除

javaScript 事件代理10分鐘到精通

需求:點擊刪除按鈕,刪除這一項。

非事件代理的做法:給每一個刪除按鈕都綁定一個事件處理函數來刪除本項。

事件代理的做法:給ul綁定一個事件處理函數,通過事件源對象找到當前項的li,執行刪除。

javaScript 事件代理10分鐘到精通


分享到:


相關文章: