zoukankan      html  css  js  c++  java
  • js自定义事件(二)

      js自定义事件(一)的目的只是让大家简单的理解自定事件是如何模拟出来的,大家不难发现会有很多缺陷,比如:

      1、此事件对象只能注册一个事件,不能提供多个事件

      2、注册方法没有返回的一些信息

      下面我们就来解决这些问题。如下为MyEvent.js源代码:

    function MyEvent(){
        this.handlers={};
    }
    MyEvent.prototype={
        addHandler:function(type,handler)
        {
            if(typeof this.handlers[type]=="undefined")
            {
                this.handlers[type]=[];
            }
            this.handlers[type].push(handler);
        },
        fire:function(event)
        {if(this.handlers[event.type] instanceof  Array)
            {
                var handlers=this.handlers[event.type];
                for(var i= 0, len=handlers.length;i<len;i++)
                {
                    handlers[i](event);
                }
            }
        },
        removeHandler:function(type,handler)
        {
            if(this.handlers[type] instanceof  Array)
            {
                var handlers=this.handlers[type];
                for(var i= 0, len=handlers.length;i<len;i++)
                {
                    if(handlers[i]===handler)
                    {
                        break;
                    }
                }
                handlers.splice(i,1);
            }
        }
    };

      此类就是对第一篇的优化。

      属性handler变成了handlers,变成了一个数组  

      addHandler()方法接受两个参数:事件类型和用于处理该事件的函数。当调用该方法时,会进行一次检查,看看handlers属性中是否已经存在一个针对该事件类型的数组

    ;如果没有,则创建一个新的。然后使用push()将该处理程序添加到数组的末尾。

      fire()方法用于触发一个事件,该方法接受一个参数,是一个至少包含type属性的对象,不然无法确定handlers里面是否已经存在。它会通过此type去查找对应该事件类型的一组处理程序,调用各个函数,并给出event对象。因为这些都是自定义对象,所以event对象上面的其他东西可以由你自己定义。

      removeHandler()方法时addHandler()的辅助,它们接受的参数一样:事件的类型和事件处理程序。这个方法搜索事件处理程序的数组找到要删除的处理程序的位置。如果找到了,则使用break操作符退出循环。然后使用splice()方法将该项目从数组中删除。

      这里使用方式我们换一种比较长用的形式,现在据我说知很多产品在使用事件上有两种方式,一种是直接继承(js本省没有此概念,不过我们可以通过原型链模拟出继承的效果,此处不做详细解释)此事件对象,那么就会拥有了这些行为,不过此方法比较局限,另一种方式更常用一些,就是需要使用事件的类上面创建一个属性用于存放此对象。如:子相同目录下再创建一个Student.js文件,里面的代码如下:

    function Student(name)
    {
        this.myEvent=new MyEvent();
        this.name=name;
    }
    Student.prototype={
        setName:function(name)
        {
            var eventStart={
                type:"changeNameStart",
                newName:name,
                oldName:this.name
            };
            this.myEvent.fire(eventStart);
            this.name=name;
        }
    }

      这里有一个学生类,构造函数里面初始化一个MyEvent对象作为属性,通过参数初始化name属性。

      提供一个方法setName用于改变名字,不过在改变名字之前设置了可能触发事件changNameStart的监听。

      创建一个html页面,放于同个目录下,代码如下:

    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="MyEvent.js"></script>
        <script type="text/javascript" src="Student.js"></script>
        <script type="text/javascript">
            function init()
            {
           //初始化一个学生对象
    var student=new Student("Mr liu");
           //注册事件changNameStart student.myEvent.addHandler(
    "changeNameStart",myMethod);
           //设置name,将会触发事件changNameStart student.setName(
    "Mr Huang"); } function myMethod(e) { alert("事件类型:"+e.type+"; 改变前的名字:"+ e.oldName+"; 改变后的名字:"+ e.newName); } </script> </head> <body> <input type="button" onclick="init()" value="测试" /> </body> </html>

      这样使用起来就会很方便,也是一种常用的使用方式。

      一般在真正的项目里面使用使用事件时我们还需要做一些优化,比如:

      1、用户并不知道我们提供了哪些事件,从代码来看好像什么事件都可以添加到handlers里面,但是真正起效果的(我们设置fire()方法的地方)事件我们并不能从代码里面很直观的看出来,一般做产品,在这方面都需要再做考虑。

      2、有没有发现fire的参数event好像没用固定,在大兴项目里面,最好event也做成一个类型,在fire的地方就比较方便使用一些,event可能会有很多种类型,那时可能fire里面会出现一些判定了。

      希望对初入js事件的读者有所帮助,互相交流。

      

  • 相关阅读:
    四大组件的工作过程
    理解Window和WindowManager
    Android中的动画
    View的工作原理
    62、滑动窗口的最大值
    61、数据流中的中位数
    60、二叉搜索树的第k个结点
    59、序列化二叉树
    58、把二叉树打印成多行
    57、按之字形顺序打印二叉树
  • 原文地址:https://www.cnblogs.com/zhuimengdeyuanyuan/p/2867838.html
Copyright © 2011-2022 走看看