成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

淺談事件委托機(jī)制

WelliJhon / 1168人閱讀

摘要：所謂的事件委托，簡(jiǎn)單的來(lái)說(shuō)就是將一個(gè)元素響應(yīng)事件委托給另外一個(gè)元素。而正好瀏覽器當(dāng)中有事件冒泡機(jī)制，一張圖簡(jiǎn)單了解下瀏覽器的事件響應(yīng)機(jī)制。

適用場(chǎng)景

在日常開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到這樣一種場(chǎng)景：我需要通過(guò)ajax從后端獲取數(shù)據(jù)后動(dòng)態(tài)添加dom節(jié)點(diǎn)來(lái)展示數(shù)據(jù)，并且這些dom節(jié)點(diǎn)有時(shí)候又需要是可交互的，例如點(diǎn)擊事件。
那么在我們獲取到數(shù)據(jù)之前這些dom節(jié)點(diǎn)是不存在的，也就是說(shuō)我們沒(méi)辦法在獲取數(shù)據(jù)之前給這個(gè)dom節(jié)點(diǎn)綁定任何事件。這個(gè)時(shí)候就需要事件委托來(lái)處理這類(lèi)問(wèn)題。

所謂的事件委托，簡(jiǎn)單的來(lái)說(shuō)就是將一個(gè)元素響應(yīng)事件委托給另外一個(gè)元素。
而正好瀏覽器當(dāng)中有事件冒泡機(jī)制，一張圖簡(jiǎn)單了解下瀏覽器的事件響應(yīng)機(jī)制。

捕獲階段：在事件冒泡的模型中，捕獲階段不會(huì)響應(yīng)任何事件；

目標(biāo)階段：目標(biāo)階段就是指事件響應(yīng)到觸發(fā)事件的最底層元素上；

冒泡階段：冒泡階段就是事件的觸發(fā)響應(yīng)會(huì)從最底層目標(biāo)一層層地向外到最外層（根節(jié)點(diǎn)），事件委托即是利用事件冒泡的機(jī)制把里層所需要響應(yīng)的事件綁定到外層；

簡(jiǎn)單的說(shuō)就是，我們使用document.addEventListener給dom節(jié)點(diǎn)綁定事件時(shí)會(huì)有個(gè)可選參數(shù)useCapture,設(shè)置為true就代表只執(zhí)行事件捕捉,默認(rèn)為false就代表默認(rèn)是會(huì)有事件冒泡的。

因此我們跟事件委托結(jié)合起來(lái)就可以將子元素的事件委托給父元素，我們可以將事件綁定在父元素上，讓他來(lái)判斷子元素的情況并決定要不要執(zhí)行該事件。

委托的優(yōu)點(diǎn)

設(shè)想一下，假如后端返回1000個(gè)商品數(shù)據(jù)，獲取到之后每個(gè)商品又希望他是可點(diǎn)擊的，那么這時(shí)候如果給1000個(gè)商品都綁定事件的話(huà)，那消耗的內(nèi)存可想而知是海量的。這時(shí)候事件委托就十分有意義了，你只需給一個(gè)父元素綁定事件，再執(zhí)行的期間再去判斷子元素情況看是否要執(zhí)行你想要的事件。

并且，委托是可以動(dòng)態(tài)綁定事件的，而正常的綁定事件都是需要獲取到具體的dom節(jié)點(diǎn)之后才可進(jìn)行。

簡(jiǎn)易封裝

說(shuō)這么多，我們最后簡(jiǎn)單來(lái)實(shí)現(xiàn)一下事件委托函數(shù)吧。
核心思路就是，父元素觸發(fā)相應(yīng)后判斷子元素是否滿(mǎn)足函數(shù)所傳入的選擇器鉤子，滿(mǎn)足的情況下就說(shuō)明該元素需要觸發(fā)該事件。

/**
 * @param {綁定的事件名稱(chēng)} event 
 * @param {想要綁定的子元素，可傳入class或者標(biāo)簽名或者id} selector 
 * @param {委托的父元素，可傳入class或者id，建議傳入id} pSelector 
 * @param {事件回調(diào)函數(shù)} callback 
 * @param {回調(diào)函數(shù)需要傳入的參數(shù)} data 
 */
function delegation(event, selector, pSelector, callback, data) {
    var isId = selector.indexOf("#") === 0;
    var isTagName = selector.indexOf(".") === -1;
    var isClassName = selector.indexOf(".") === 0;
    var parent = document.querySelector(pSelector);
    parent.addEventListener(event, function(e) {
        var target = e.target;
        if (isClassName) {
            // 如果傳入class名
            if (target.className === selector.substr(1)) callback(data);
        } else if (isTagName) {
            // 如果傳入標(biāo)簽名
            if (target.nodeName.toLocaleLowerCase() === selector) callback(data);
        } else if (isId) {
            // 如果傳入id名
            if (target.id === selector.substr(1)) callback(data);
        }
    });
}
delegation("click", "div", "body", function(data){
    console.log("click =>", data); // click => {test: 1}
}, {test: 1});

以上是簡(jiǎn)單實(shí)現(xiàn)的委托函數(shù)，沒(méi)有處理各種瀏覽器兼容性問(wèn)題。主要是為了簡(jiǎn)單演示下綁定機(jī)制～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93301.html

相關(guān)文章

  • 淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則 頁(yè)面優(yōu)化 靜態(tài)資源壓縮...

    Aomine 評(píng)論0 收藏0

  • 淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則 頁(yè)面優(yōu)化 靜態(tài)資源壓縮...

    luffyZh 評(píng)論0 收藏0

  • 淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

    摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則 頁(yè)面優(yōu)化 靜態(tài)資源壓縮...

    CoderStudy 評(píng)論0 收藏0

  • 淺談Javascript事件委托（代理）

    摘要：開(kāi)玩笑啦，提供一種方法叫做事件委托。途中經(jīng)過(guò)各個(gè)層次的，并在各上觸發(fā)捕獲事件，直到到達(dá)時(shí)間的目標(biāo)。懂得了事件冒泡的過(guò)程，就很容易明白事件委托的運(yùn)作原理。 首先祝大家七夕快樂(lè)。。假如現(xiàn)在有一個(gè)的列表，里面可能會(huì)有若干個(gè)列表項(xiàng)。現(xiàn)在要為每一個(gè)列表項(xiàng)綁定相同的點(diǎn)擊事件，現(xiàn)在你可能會(huì)有這幾種做法： 手動(dòng)為每一個(gè)列表項(xiàng)綁定事件； 在onload的時(shí)候，找到該列表，對(duì)其每一個(gè)子元素進(jìn)行遍歷，循環(huán)...

    yunhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<