javascript - 關於原生js如何實作jquery的on()方法。

Question

原生js如何實作jquery的on()方法,並且支援給一個元素同時綁定多個事件？

例如：

element.on('click mouseout',function(){...});

這樣的話用原生JS怎麼實現？

Answer 1

給你一個簡單的範例，如果你想在原生的JS中，使用on方法，可以這樣寫：

HTMLElement.prototype.on = function(events, callback){
    let evs = events.split(' ');
    for(let event of evs){
        this.addEventListener(event, callback);
    }
    // 如果你想像JQuery一样支持链式调用，可以在这里返回this
    // return this;
}

這樣的寫法有很多漏洞，因為很多情況都沒有考慮到。例如IE的事件綁定沒有考慮到。例如多個事件沒有考慮多個回調。

但是。畢竟是要告訴你思想，而不是給你重複造個輪子。

JQuery的實作大概也是這麼個邏輯，你可以用這樣的方法去封裝屬於自己的函式庫。

Answer 2

新增事件監聽器