码迷,mamicode.com
首页 > 其他好文 > 详细

一个简单的前端事件框架

时间:2018-02-01 17:46:53      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:size   []   nbsp   自定义   log   cal   push   处理   length   

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

<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>

 

一个简单的前端事件框架

标签:size   []   nbsp   自定义   log   cal   push   处理   length   

原文地址:https://www.cnblogs.com/Fredric-2013/p/8399056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!