問(wèn)題描述

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

例如：

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

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

問(wèn)題解答

給你一個(gè)簡(jiǎn)單的示例，如果你想在原生的JS中，使用on方法，可以這樣寫(xiě)：

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;}

這樣的寫(xiě)法有很多漏洞，因?yàn)楹芏嗲闆r都沒(méi)有考慮。比如IE的事件綁定沒(méi)有考慮。比如多個(gè)事件沒(méi)有考慮多個(gè)回調(diào)。

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

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

addEventListener