国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端面試js-手寫事件委托（一點小改進）

rottengeek / 2544人閱讀

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

最近剛好在學js的事件機制，寫這個是看到這篇文章提到了一個騰訊的面試題。我先把文章的代碼稍作改動貼在這里。


        

            

                

            

        

        
    

作者：一只dororo
鏈接：https://www.jianshu.com/p/7ea01a3beb7a
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

顯示效果如圖：

但是這段代碼有一個小問題：用鼠標點擊綠色方塊，不會輸出‘test’,這仿佛違背了我們希望事件冒泡的初衷。
這是由于在綁定的時候，很關鍵的一個地方在eventfn函數，它限制了只有當target就是selector匹配的元素時，才會調用handler。
而事實上我們在調用這個函數的時候，target是selector匹配到的元素的子節點也可以。
在這里介紹一個新的api,parent.contains(node),他返回一個布爾值，判斷node是不是parent節點的后代或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;
    }    
}

現在再點擊綠色方塊也可以打印"test"啦。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98074.html

相關文章

  • 2018.11.19秋招末第二波前端實習/校招小結

    摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...

    suxier 評論0 收藏0

  • 2018.11.19秋招末第二波前端實習/校招小結

    摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...

    canger 評論0 收藏0

  • 前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

    答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

    Kerr1Gan 評論0 收藏0

  • 前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

    答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

    lushan 評論0 收藏0

  • 前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

    答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

    joyvw 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<