一个简单的前端事件框架

参考网上的一个资料,做下备注。

复制代码
<html>
    <head>
        <title>js event demo</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0" max-age="0">
    </head>
    <body>
        <h4>js event demo</h4>
    </body>
    <script type="text/javascript">

        //自定义事件
        function EventEmitter() {
            this.events = {};
        }   

        //绑定事件函数
        EventEmitter.prototype.on = function(ename, call){
            this.events[ename] = this.events[ename] || [];
            this.events[ename].push(call);
        }

        EventEmitter.prototype.emit = function(ename, _){


            var events = this.events[ename];
            //取参数,剔除参数ename
            var args   = Array.prototype.slice.call(arguments, 1);

            for(var i = 0; i < events.length; i++){
                
                //调用绑定的事件函数
                events[i].apply(null, args);
            }
        }

        function app(){

            calltime = 0;

            //同一个事件绑定了两个处理函数
            this.on('start',function(user, date){
                calltime += 1;
                console.log('event start: ' + user + " " + date + " " + calltime);
            });

            this.on('start', function(user, date){
                calltime += 1;
                console.log('event start: ' + user + " " + date + " " + calltime);
            })
        }


        app.prototype = new EventEmitter();

        var a = new app();
        
        //触发事件
        a.emit('start', 'fred', new Date());

    </script>

</html>
复制代码

 

posted @   Fredric_2013  阅读(202)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示