jQuery的原生js實現—on方法

NO IMAGE

國慶節來了,心情不錯,但學習還得繼續,今天特意對jQuery的on事件繫結做一個筆記。

<div class="aon">
<sapn class="aspan">1</sapn>
<sapn class="aspan">2</sapn>
</div>
<div class="aon">
<sapn class="aspan">3</sapn>
<sapn class="aspan">4</sapn>
</div>
<div class="aon">
<sapn class="aspan">5</sapn>
<sapn class="aspan">6</sapn>
</div>
<div class="aon">
<sapn class="aspan">7</sapn>
<sapn class="aspan">8</sapn>
</div>

//原生js簡單實現jQuery---on方法
//IE9以下支援attachEvent,其中也包括低版本歐朋等。谷歌等webkit核心的支援addEventListener
//思路,可以修改Element原型鏈,新增一個on方法
//也可以自己新增類方法
//由於時間關係,使用網上流行的修改Element原型鏈,實現on事件繫結部分功能
Element.prototype.on = function(type,fn){
window.addEventListener ? this.addEventListener(type,fn) : this.attachEvent('on'   type,fn);
}
document.querySelector('.aon').on('click',function(){
alert(this.innerHTML);
});

是不是覺得可以相容IE9以下瀏覽器?大家可以測試,答案是不行。IE7並不能識別Element元素,然後這個做法侷限性非常大,他只能繫結一種事件,無法同時為一個元素繫結多個事件。例如jQuery 的 on(‘aa bb cc’,function(){}) 。

想要多種事件同事繫結,常規做法大家應該知道,迴圈遍歷咯

Element.prototype.on = function(type,fn){
type = type.split(' ');
for(let i=0; i <type.length; i  ){
window.addEventListener ? this.addEventListener(type[i],fn) : this.attachEvent('on'   type[i],fn);
}
}
document.querySelector('.aon').on('click mouseover',function(){
alert(this.innerHTML);
});

我比較任何網上某些網友說的,實現簡單的on繫結,多種事件簡單處理都是旁枝細節。jQuery真正核心是手工模擬了事件的迴圈佇列,只能好好學習天天向上。

為了更好的相容,但IE並不認識Element,怎麼辦?手動獲取DOM元素,並繫結on方法,就像jQuery是一個類那樣。

class aQuery {
constructor(selector){
this.doc = document;
this.selector = this.doc.querySelectorAll(selector);
}
each(){   
for(let i=0;i<this.selector.length;i  ){  
if(arguments[0].call(this.selector,i,this.selector[i])===false){  
break;  
}  
}  
return this;  
}  
on(type,fn){
let _this = this;
type = type.split(' ');
this.each(function(i,v){
window.addEventListener ? _this.selector[i].addEventListener(type[i],fn) : _this.selector[i].attachEvent('on'   type[index],fn);
});
return this;
}
}
new aQuery('.aon').on('click mouseover',function(){
alert(this.innerHTML);
});

好吧,我跑偏了,使用es6的類,不過實現了jQuery的dom簡單獲取,鏈式呼叫each方法和on事件繫結,on可以同事繫結多個事件,只是簡單的繫結。