jquery 的 on 和 off 的简单实现

作者: D_R_M | 来源:发表于2019-04-21 13:01 被阅读0次

jquery 的 on 和 off 的简单实现
原生js实现on与off 方法
如何实现一个jQuery的api
html新增后触发点击事件（off和on的使用)
简单模仿jQuery
JQuery简单实现
用原生DOM实现一个jQuery的API
JQuery 的元素选择器的实现原理
jquery实现页面内链接锚点跳转平滑滚动效果
jQuery结构简析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/main.css">
    <title>jQuery：on和off的实现</title>
</head>
<body>
    <button id="b1">btn1</button>
    <hr/>
    <div class="time">div3</div>
    <script>
    ;(function(win,dom){
        var jQuery = function(nodeStr){
            if(!(this instanceof jQuery)) return new jQuery(nodeStr);
            this.node = dom.querySelector(nodeStr);
            this.nodeName = nodeStr;
        }
        jQuery.prototype.EventBox = {};
        jQuery.prototype.on = function(eventString,fun){
            if(typeof this.EventBox[this.nodeName]!='undefined'){
                this.EventBox[this.nodeName][eventString] = fun;
            }else{
                this.EventBox[this.nodeName] = {[eventString]:fun};
            }
            this.node.addEventListener(eventString,this.EventBox[this.nodeName][eventString]);
        } 
        jQuery.prototype.off = function(eventString){
            if(typeof this.EventBox[this.nodeName]!='undefined'){
                this.node.removeEventListener(eventString,this.EventBox[this.nodeName][eventString]);
            }
        }           
        win.$=jQuery;
    })(window,document)
    $('#b1').on('click',function(){
        console.log('绑定成功!')
    })
    var count = 4;
    (function time(){
        $('.time').node.innerHTML = count+'秒后移除事件';
        if(count-- != 0){
            setTimeout(time,1000)
        }else{
            $('.time').node.innerHTML = '移除事件.';
            $('#b1').off('click');
        }
    })()
    </script>
</body>
</html>