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

jQuery的on事件绑定与原生JS实现

最新推荐文章于 2022-03-15 16:48:36 发布

miao淼

最新推荐文章于 2022-03-15 16:48:36 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery源码学习

本文链接：https://blog.youkuaiyun.com/wujimiao/article/details/78145924

jQuery源码学习专栏收录该内容

12 篇文章

订阅专栏

本文是关于jQuery中on方法的使用及如何用原生JavaScript实现事件绑定的笔记。在确保兼容性的同时，探讨了如何针对IE浏览器手动获取DOM元素并绑定事件。

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