實(shí)現(xiàn)思路：
嗯，這個(gè)題思考了很久，網(wǎng)上找了很多資料但還是不怎么會(huì)，還達(dá)不到想要的效果，有點(diǎn)鉆牛角尖了。盡量來(lái)寫(xiě)一下吧。（我果然是個(gè)弱雞）。感謝秒味課堂的免費(fèi)課程。

題目要求獲取到所有的節(jié)點(diǎn)中的第一個(gè)，所以不需要用數(shù)組來(lái)儲(chǔ)存獲取到的節(jié)點(diǎn)。

額。。想了半天，還是使用函數(shù)包裝來(lái)實(shí)現(xiàn)后代選擇器比較好，所以VQuery函數(shù)返回是獲取到的完整節(jié)點(diǎn)對(duì)象數(shù)組，$函數(shù)用來(lái)達(dá)到題目要求。

所以在VQuery函數(shù)中就不需要考慮空格了，直接使用switch分支，來(lái)判定不同的情況。#、.、[、 [=]。

在$函數(shù)中，判斷字符串中是否含有空格，有空格的話需要分割成數(shù)組，數(shù)組的前一項(xiàng)是為父選擇符，后一項(xiàng)為子選擇符。分不同的情況來(lái)調(diào)用VQuery函數(shù)，并返回對(duì)象。

/**
 * $函數(shù)的依賴函數(shù)，選擇器函數(shù)
 * @param   {string} selector CSS方式的選擇器
 * @param   {object} root     可選參數(shù)，selector的父對(duì)象。不存在時(shí)，為document
 * @returns {Array}  返回獲取到的節(jié)點(diǎn)數(shù)組，需要注意的是使用ID選擇器返的也是數(shù)組
 */
function VQuery(selector, root) {
    //用來(lái)保存選擇的元素
    var elements = []; //保存結(jié)果節(jié)點(diǎn)數(shù)組
    var allChildren = null; //用來(lái)保存獲取到的臨時(shí)節(jié)點(diǎn)數(shù)組
    root = root || document; //若沒(méi)有給root，賦值document
    switch (selector.charAt(0)) {
    case "#": //id選擇器
        elements.push(root.getElementById(selector.substring(1)));
        break;
    case ".": //class選擇器
        if (root.getElementsByClassName) { //標(biāo)準(zhǔn)
            elements = root.getElementsByClassName(selector.substring(1));
        } else { //兼容低版本瀏覽器
            var reg = new RegExp("" + selector.substring(1) + "");
            allChildren = root.getElementsByTagName("*");
            for (var i = 0, len = allChildren.length; i < len; i++) {
                if (reg.test(allChildren[i].className)) {
                    elements.push(allChildren[i]);
                }
            }
        }
        break;
    case "[": //屬性選擇器
    
        if (selector.indexOf("=") === -1) {
        //只有屬性沒(méi)有值的情況
            allChildren = root.getElementsByTagName("*");
            for (var i = 0, len = allChildren.length; i < len; i++) {
                if (allChildren[i].getAttribute(selector.slice(1, -1)) !== null) {
                    elements.push(allChildren[i]);
                }
            }
        } else {
        //既有屬性又有值的情況
            var index = selector.indexOf("="); //緩存=出現(xiàn)的索引位置。
            allChildren = root.getElementsByTagName("*");
            for (var i = 0, len = allChildren.length; i < len; i++) {
                if (allChildren[i].getAttribute(selector.slice(1, index)) === selector.slice(index + 1, -1)) {
                    elements.push(allChildren[i]);
                }
            }
        }
        break;
    default: //tagName
        elements = root.getElementsByTagName(selector);
    }
    return elements
}
/**
 * 模仿jQuery的迷你$選擇符。
 * @param   {string} selector CSS方式的選擇器，支持簡(jiǎn)單的后代選擇器（只支持一級(jí)）
 * @returns {object} 返回獲取到的第一個(gè)節(jié)點(diǎn)對(duì)象，后代選擇器時(shí)，返回第一個(gè)對(duì)象中的第一個(gè)符合條件的對(duì)象
 */
function $(selector) {
//這里trim處理輸入時(shí)兩端出現(xiàn)空格的情況，支持ie9+。但是這個(gè)函數(shù)實(shí)現(xiàn)起來(lái)也特別簡(jiǎn)單，可以參考我task0002（-）前面有trim函數(shù)的實(shí)現(xiàn)。稍微修改一下，這樣就沒(méi)兼容性問(wèn)題了。
    if (selector == document) {
        return document;
    }
    selector = selector.trim();
    //存在空格時(shí)，使用后代選擇器
    if (selector.indexOf(" ") !== -1) {
        var selectorArr = selector.split(/s+/); //分割成數(shù)組，第一項(xiàng)為parent，第二項(xiàng)為chlid。
        //這里沒(méi)去考慮特別多的情況了，只是簡(jiǎn)單的把參數(shù)傳入。
        return VQuery(selectorArr[1], VQuery(selectorArr[0])[0])[0];
    } else { //普通情況,只返回獲取到的第一個(gè)對(duì)象
        return VQuery(selector,document)[0];
    }
}

我們來(lái)繼續(xù)用封裝自己的小jQuery庫(kù)來(lái)實(shí)現(xiàn)我們對(duì)于JavaScript事件的學(xué)習(xí)，還是在你的util.js，實(shí)現(xiàn)以下函數(shù)

// 給一個(gè)element綁定一個(gè)針對(duì)event事件的響應(yīng)，響應(yīng)函數(shù)為listener
function addEvent(element, event, listener) {
    // your implement
}

// 例如：
function clicklistener(event) {
    ...
}
addEvent($("#doma"), "click", a);

// 移除element對(duì)象對(duì)于event事件發(fā)生時(shí)執(zhí)行l(wèi)istener的響應(yīng)
function removeEvent(element, event, listener) {
    // your implement
}

這里慕課網(wǎng)的視頻講的特別清楚，就不贅述了。

慕課網(wǎng) DOM探索之基礎(chǔ)詳解篇

慕課網(wǎng) DOM事件探秘。這一部分，主要看這個(gè)。

/**
 * 事件添加函數(shù)
 * @param {object}   element  需要綁定事件的對(duì)象
 * @param {string}   event    事件類型
 * @param {function} listener 事件觸發(fā)執(zhí)行的函數(shù)
 */
function addEvent(element, event, listener) {
    if (element.addEventListener) { //標(biāo)準(zhǔn)
        element.addEventListener(event, listener, false);
    } else if (element.attachEvent) { //低版本ie
        element.attachEvent("on" + event, listener);
    } else { //都不行的情況
        element["on" + event] = listener;
    }
}

/**
 * 事件移除函數(shù)
 * @param {object}   element  需要移除事件的對(duì)象
 * @param {string}   event    事件類型
 * @param {function} listener 需要被移除事件函數(shù)
 */
function removeEvent(element, event, listener) {
    // your implement
    if (element.removeEventListener) { //標(biāo)準(zhǔn)
        element.removeEventListener(event, listener, false);
    } else if (element.detachEvent) { //低版本ie
        element.detachEvent("on" + event, listener);
    } else { //都不行的情況
        element["on" + event] = null;
    }
}

利用上面寫(xiě)好的事件綁定函數(shù)就很簡(jiǎn)單了。

click事件，這個(gè)簡(jiǎn)單，直接函數(shù)封裝一層就行。

Enter事件，這里主要考察的鍵盤(pán)的事件的觸發(fā)。

keydown事件：在鍵盤(pán)按下時(shí)觸發(fā).

keyup事件：在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤(pán)起來(lái)后的事件

keypress事件：在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵

keyCode屬性：在鍵盤(pán)事件觸發(fā)時(shí)，按下的鍵的值。值=13時(shí)，為Enter鍵。（需進(jìn)行兼容處理）

// 實(shí)現(xiàn)對(duì)click事件的綁定
function addClickEvent(element, listener) {
    addEvent(element, "click", listener);
}
// 實(shí)現(xiàn)對(duì)于按Enter鍵時(shí)的事件綁定
function addEnterEvent(element, listener) {
    // your implement
    addEvent(element, "keydown", function (ev) {
    //兼容性處理。
        var oEvent = ev || window.event;
        if (oEvent.keyCode === 13) {
            listener();
        }
    });
}

接下來(lái)我們把上面幾個(gè)函數(shù)和$做一下結(jié)合，把他們變成$對(duì)象的一些方法

addEvent(element, event, listener) -> $.on(element, event, listener);

removeEvent(element, event, listener) -> $.un(element, event, listener);

addClickEvent(element, listener) -> $.click(element, listener);

addEnterEvent(element, listener) -> $.enter(element, listener);

//在js中萬(wàn)物皆對(duì)象(原諒我這么淺顯的說(shuō)），所以實(shí)現(xiàn)就特別簡(jiǎn)單了
$.on = function (element, type, listener) {
    return addEvent(element, type, listener);
};
$.un = function (element, type, listener) {
    return removeEvent(element, type, listener);
};
$.click = function (element, listener) {
    return addClickEvent(element, listener);
}
$.enter = function (element, listener) {
    $.enter addEnterEvent(element, listener);
};

接下來(lái)考慮這樣一個(gè)場(chǎng)景，我們需要對(duì)一個(gè)列表里所有的

    
Simon
    
Kenner
    
Erik

Change
function clickListener(event) {
    console.log(event);
}

function renderList() {
    $("#list").innerHTML = "
new item
";
}

function init() {
    each($("#list").getElementsByTagName("li"), function(item) {
        $.click(item, clickListener);
    });

    $.click($("#btn"), renderList);
}
init();

// 先簡(jiǎn)單一些
function delegateEvent(element, tag, eventName, listener) {
    // your implement
}

$.delegate = delegateEvent;
// 使用示例
// 還是上面那段HTML，實(shí)現(xiàn)對(duì)list這個(gè)ul里面所有l(wèi)i的click事件進(jìn)行響應(yīng)
$.delegate($("#list"), "li", "click", clickHandle);

/**
 * 事件代理
 * @param   {HTMLElement}   element   需要進(jìn)行事件代理的父元素。
 * @param   {string}   tag       需要觸發(fā)事件的標(biāo)簽名
 * @param   {string}   eventName 觸發(fā)的事件類型
 * @param   {function} listener  事件執(zhí)行的函數(shù)
 * @returns {[[Type]]} [[Description]]
 */
function delegateEvent(element, tag, eventName, listener) {
    // your implement
    return addEvent(element, eventName, function (ev) {
        var oEvent = ev || event; //兼容處理
        var target = oEvent.target || oEvent.srcElement; //兼容處理
        if (target.tagName.toLocaleLowerCase() === tag) {
            listener.call(target, oEvent); //使用call方法修改執(zhí)行函數(shù)中的this指向，現(xiàn)在this指向觸發(fā)了事件的HTML節(jié)點(diǎn)（可直接使用this.innerHTML返回該節(jié)點(diǎn)內(nèi)容）
        }
    })
}

$.delegate = function (element, tag, eventName, listener) {
    return delegateEvent(element, tag, eventName, listener);
};

//和上面的函數(shù)一樣，原來(lái)第一個(gè)參數(shù)是傳入獲取到的父HTMLElement對(duì)象，現(xiàn)在直接傳入選擇器名稱就行
$.delegate = function (selector, tag, event, listener) {
//這里的`$(selector)`，是用的自己封裝的選擇器函數(shù)，愿意的話可以換成標(biāo)準(zhǔn)支持的`document.querySelector()`
    return delegateEvent($(selector), tag, event, listener);
};
// 使用示例：
$.delegate("#list", "li", "click", liClicker);