jQuery的原生js实现---on方法

国庆节来了，心情不错，但学习还得继续，今天特意对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可以同事绑定多个事件，只是简单的绑定。