問題描述

原生js如何實現(xiàn)jquery的on()方法,并且支持給一個元素同時綁定多個事件？

例如：

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

這樣的話用原生JS怎么實現(xiàn)？

問題解答

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

HTMLElement.prototype.on = function(events, callback){ let evs = events.split(’ ’); for(let event of evs){this.addEventListener(event, callback); } // 如果你想像JQuery一樣支持鏈?zhǔn)秸{(diào)用，可以在這里返回this // return this;}

這樣的寫法有很多漏洞，因為很多情況都沒有考慮。比如IE的事件綁定沒有考慮。比如多個事件沒有考慮多個回調(diào)。

但是。畢竟是要告訴你思想，而不是給你重復(fù)造個輪子。

JQuery的實現(xiàn)大概也是這么個邏輯，你可以使用這樣的方法去封裝屬于自己的庫。

addEventListener