求JS自定义事件的原理或者教程

在easyui中有这样的用法$('#cc').combotree{}
html内置的事件只有onclick ,onchange...等等,我想知道像combotree这种事件是怎么实现的!

解决方案 »

  1.   


    在JS中事件是JS与浏览器交互的主要途径。事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。对象可以发布事件，用来表示在该对象生命周期中某个有趣的时刻到了。然后其他对象可以观察该对象，等待这些有趣的时刻到来并通过运行代码来响应。观察者模式有两类对象组成：主题和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情，也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面说，观察者知道主体并能注册事件的回调函数（事件处理程序）。涉及DOM上时，DOM元素便是主体，你的事件处理代码便是观察者。事件是与DOM交互的最常见的方式，但它们也可以用于非DOM代码中----通过实现自定义事件。自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听那些事件。说简单点就是我们希望在程序运行的时候，路线可能会有很多，如果程序运行到了一个特殊的地方，我们希望立刻运行用户注册的方法里面的代码，运行完毕后再继续运行，这个过程叫做监听。例如，创建一个文件MyEvent.js文件，里面创建一个类：
    复制代码 代码如下:function MyEvent(){
    this.handler;
    }
    MyEvent.prototype={
    addHandler:function(handler)
    {
    this.handler=handler;
    },
    fire:function()
    {
    this.handler();
    },
    removeHandler:function()
    {
    this.handler=null;
    }
    }上面使用js原型的思想创建的一个类，如果读者不太了解可以查看相关资料。MyEvent类型有一个单独的属性handler，用于存储事件处理程序（也就是用户注册的方法）。还有三个方法：addHandler()，用于注册事件处理程序；fire()，用于触发一个事件；以及removeHandler()，用于注销事件的处理程序。然后我们可以这样使用，新建一个html文件，放于和MyEvent.js同一个目录，方便引用。代码如下：
    复制代码 代码如下:<html>
    <head>
    <title></title>
    <script type="text/javascript" src="MyEvent.js"></script>
    <script type="text/javascript">
    function init()
    {
    //初始化一个事件对象
    var myEvent=new MyEvent();
    //注册方法
    myEvent.addHandler(myMethod);
    //运行到此处时触发事件
    myEvent.fire();
    //移除事件注册的方法
    myEvent.removeHandler();
    //再次触发事件，发现无效
    myEvent.fire();
    }
    function myMethod()
    {
    alert("成功");
    }
    </script>
    </head>
    <body>
    <input type="button" onclick="init()" value="测试" />
    </body>
    </html>上述的注释已经很详细的说明了其中的一种使用方式。这就是一个最简单的自定义事件，不过还有很多缺陷 
      

  2.   

    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事件的读者有所帮助，互相交流。 
      

  3.   

    貌似没回答我的问题,你所说都还是系统的onclick事件,我的问题是$('#cc').XXX{}这种写法 cc是一个HTML元素,你上面所说的都是new 一个对象然后调用定义的函数,这个好理解 我不明白的是XXX是怎么定义出来的 而且直接就用在元素上面了
      

  4.   

    网上很多视频教程的，百度下传智播客标签视频 自定义标签应该是在jsp的大类下面。
    http://download.csdn.net/download/wasgij1/4673166