Javascript添加事件主要有三种方式：

一、直接在DOM结点上写onclick=”fn()”

这样写的话耦合性强，js函数与对应的DOM结点被强关联起来了，要重用的话也不好重用，改动的话更是崩溃，要找到对应的DOM结点。

二、在Javascript代码中使用DOM.onclick=function(){}的方式添加事件

解决了耦合性问题，但是这种方式只能对一个DOM添加一个事件，如果一个DOM结点对应多个事件的话就没有办法了。

三、在Javascript代码中使用DOM.addEvent()添加事件

这种方式灵活，既解决了耦合性问题，还可以添加多个事件，但代码稍微复杂，不过还是推荐这种方法

function addEvent(obj,type,handle){
        if(obj.attachEvent){
            obj.attachEvent(‘on’ + type,handle);
        }else if(obj.addEventListener){
            obj.addEventListener(type,handle,false);
        }else{
            obj['on' + type] = handle;
        }
    }

jquery事件绑定

Query的绑定事件非常方便，有bind、live、one还有它帮你把一些常用的事件给单独了出来，比如控件的onclick事件，我们绑定onclick事件的时候只需要

    $("#testButton").click(function() { 
        alert("I'm Test Button"); 
    });

就这样我们在testButton这个按钮上绑定了onclick事件，执行alert语句。我们也可以使用$("#testButton").click();来触发这个onclick事件，一切都非常ok啦。以上有点sb了，接下来看看取消事件。jQuery有unbind的方法，专门来取消绑定的，也就是取消事件，按照上面的例子的话，应该使用：$("#testButton").unbind("click");恩，看上去非常好，如果你的click有2个事件的话，你还可以使用unbind("click", fnName)来删除特定函数的绑定。为什么有这个取消特定函数的方法呢，我们来看下例子，我们会发现，javascript的事件，跟C#的事件如出一辙,事件的绑定是叠加（+=）而不是覆盖。 

    var Eat = function() { 
            alert("我要吃饭"); 
        } 
     
        var PayMoney = function() { 
            alert("先付钱"); 
        } 
     
        jQuery(document).ready(function() { 
            $("#testButton").click(Eat); 
            $("#testButton").bind("click", PayMoney); 
        });

通过上面的例子，我们发现会先弹出：“我要吃饭”紧接着会弹出“先付钱”,说明它的绑定是通过onclick+=fn进行的。我们修改下ready的方法：     

    jQuery(document).ready(function() { 
               $("#testButton").click(Eat); 
               $("#testButton").unbind(); 
               $("#testButton").bind("click", PayMoney); 
           });

又出错了，呵呵，这次点击按钮的话，只会执行PayMoney，不会执行Eat，那如果把unbind()放在bind后面的话，这样这个按钮就不会起作用了。但如果我要去掉绑定的PayMoney方法呢？这时候我们应该这样写：    

    jQuery(document).ready(function() { 
              $("#testButton").click(Eat); 
              $("#testButton").bind("click", PayMoney); 
              $("#testButton").unbind("click", PayMoney); 
          });

嘿嘿，跟bind其实一个样，不过接下来你将看到一个bug（我不知道算不算），让我们近距离体验一下

    ：<input id="testButton" type="button" value="Test Button" onclick="Eat();" /> 
    <script type="text/javascript"> 
            jQuery(document).ready(function() { 
                $("#testButton").unbind("click", Eat); 
                $("#testButton").unbind(); 
                $("#testButton").bind("click", PayMoney); 
            }); 
    </script>

总结

jquery只是把这三种事情加以升级了，最后还是一样的效果。