前端面試js-手寫事件委托（一點(diǎn)小改進(jìn)）

rottengeek 發(fā)布于2019-08-23 12:11 / 2611人閱讀

摘要：最近剛好在學(xué)的事件機(jī)制，寫這個(gè)是看到這篇文章提到了一個(gè)騰訊的面試題。顯示效果如圖但是這段代碼有一個(gè)小問題用鼠標(biāo)點(diǎn)擊綠色方塊，不會(huì)輸出這仿佛違背了我們希望事件冒泡的初衷。在這里介紹一個(gè)新的他返回一個(gè)布爾值，判斷是不是節(jié)點(diǎn)的后代或本身。

最近剛好在學(xué)js的事件機(jī)制，寫這個(gè)是看到這篇文章提到了一個(gè)騰訊的面試題。我先把文章的代碼稍作改動(dòng)貼在這里。


        
            
                
            
        
        
    

作者：一只dororo
鏈接：https://www.jianshu.com/p/7ea01a3beb7a
來(lái)源：簡(jiǎn)書
簡(jiǎn)書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。

顯示效果如圖：

但是這段代碼有一個(gè)小問題：用鼠標(biāo)點(diǎn)擊綠色方塊，不會(huì)輸出‘test’,這仿佛違背了我們希望事件冒泡的初衷。
這是由于在綁定的時(shí)候，很關(guān)鍵的一個(gè)地方在eventfn函數(shù)，它限制了只有當(dāng)target就是selector匹配的元素時(shí)，才會(huì)調(diào)用handler。
而事實(shí)上我們?cè)谡{(diào)用這個(gè)函數(shù)的時(shí)候，target是selector匹配到的元素的子節(jié)點(diǎn)也可以。
在這里介紹一個(gè)新的api,parent.contains(node),他返回一個(gè)布爾值，判斷node是不是parent節(jié)點(diǎn)的后代或parent本身。
因此我們修改代碼為：

function delegateEvent(interfaceEle, selector, type, fn) {
    if(interfaceEle.addEventListener) {
        interfaceEle.addEventListener(type, eventfn, false);
    } else {
        interfaceEle.attachEvent("on" + type, eventfn);
    }

    function eventfn(e) {
        var $selector = document.querySelector(selector);
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(contain($selector, target)) {
            if(fn) {
                fn.call(target, e);
            }
        }
    }
}

function contain(parent, node) {
    if (parent.contains) {
        return parent.contains(node)
    } else { //兼容不支持contains方法的瀏覽器
        while (node) {
            if (node === parentNode) {
                return true;
            } else {
                node = node.parentNode;
            }
        }
        return false;
    }    
}

現(xiàn)在再點(diǎn)擊綠色方塊也可以打印"test"啦。

云服務(wù)器 GPU云服務(wù)器一點(diǎn)小程序手寫js面試題 js事件委托什么是js 事件委托

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

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

相關(guān)文章

2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

摘要：背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí)前端方向，自學(xué)，技術(shù)棧時(shí)間背景大概是在月日準(zhǔn)備好簡(jiǎn)歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對(duì)象為大一些的互聯(lián)網(wǎng)公司事件背景第一個(gè)入職的是好未來(lái)的前端實(shí)習(xí)崗，待遇工背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí) 前端方向，自學(xué)，vue技術(shù)棧時(shí)間背景大概是在11月9日準(zhǔn)備...

suxier 2019-08-29 17:21 評(píng)論0 收藏0
2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

摘要：背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí)前端方向，自學(xué)，技術(shù)棧時(shí)間背景大概是在月日準(zhǔn)備好簡(jiǎn)歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對(duì)象為大一些的互聯(lián)網(wǎng)公司事件背景第一個(gè)入職的是好未來(lái)的前端實(shí)習(xí)崗，待遇工背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí) 前端方向，自學(xué)，vue技術(shù)棧時(shí)間背景大概是在11月9日準(zhǔn)備...

canger 2019-08-26 13:25 評(píng)論0 收藏0
前端面試題大集合：來(lái)自真實(shí)大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來(lái)源背景面試題是來(lái)自微博@?？途W(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長(zhǎng)期一個(gè)一個(gè)的記錄下來(lái)的，可能會(huì)有重復(fù)，但基本前端的面試大綱和需要掌握的知識(shí)都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。二、532道前端真實(shí)大廠面試題 express和koa的對(duì)比，兩者中間件的原理，koa捕獲異常多種情...

Kerr1Gan 2019-08-26 12:20 評(píng)論0 收藏0
前端面試題大集合：來(lái)自真實(shí)大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來(lái)源背景面試題是來(lái)自微博@?？途W(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長(zhǎng)期一個(gè)一個(gè)的記錄下來(lái)的，可能會(huì)有重復(fù)，但基本前端的面試大綱和需要掌握的知識(shí)都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。二、532道前端真實(shí)大廠面試題 express和koa的對(duì)比，兩者中間件的原理，koa捕獲異常多種情...

lushan 2019-08-02 11:34 評(píng)論0 收藏0
前端面試題大集合：來(lái)自真實(shí)大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來(lái)源背景面試題是來(lái)自微博@?？途W(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長(zhǎng)期一個(gè)一個(gè)的記錄下來(lái)的，可能會(huì)有重復(fù)，但基本前端的面試大綱和需要掌握的知識(shí)都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。二、532道前端真實(shí)大廠面試題 express和koa的對(duì)比，兩者中間件的原理，koa捕獲異常多種情...

joyvw 2019-08-30 15:54 評(píng)論0 收藏0