为事件指定处理程序的方式有好几种：
1. html事件处理程序
这里特别一个问题，事件处理程中的代码在执行时，有权访问全局作用域中的任何代码。
但在html中指定事件处处理程序有两个缺点：
1. 时差问题。
2. html与javascript代码紧密耦合
第二点比较容易理解，这里重点讲下第一点，比如：
Test UI Thread
在段代码在页面刚出现时点击按钮是没有用的，10s后再点击才能触发相应事件，这里因为用户可能会在hmtl元素一出现就触发，但当时的事件处理程序可能尚不具备执行条件，这样就会报错。
由于以上两个缺陷，好的开发者应该摒弃这种事件处理程序。
2. DOM0级事件处理程序
通过Javascript制定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方法至今仍然为所有现代游览器所支持，一是因为简单，而是跨游览器。每个元素(包括window和document)都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。
具体如下：
同样的道理，在这些代码运行以前不会指定事件处理程序，
特别强调的是，使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这时候的事件处理程序在元素的作用域中运行；换句话说，程序中的this引用当前元素。比如还是上例，代码换成：var bn3 = document.getElementById('mybutton3'); bn3.onclick = function(){ alert(this.id);// mybutton3 } 这时就会显示 mybutton3
可以在事件处理程序中通过this访问元素的任何属性和方法，以这种方式添加的事件处理程序都在事件流的冒泡阶段被处理。
当然只要像下面这样将事件处理程序属性设置为null，即可删除通过DOM0级方法指定的时间处理程序。
bn3.onclick = null;
3. DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventLister()。所有DOM节点中都包含这两个方法，并且他们都接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕捉阶段调用事件调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。比如：
通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除；移除时传入的参数和添加处理程序时使用的参数相同。这意味着通过addEventListener()添加的匿名函数将无法移除，比如：
var bn4 = document.getElementById('mybutton4'); bn4.addEventListener('click',function(){ alert('add event listener of button4'); },false); //没有用 bn4.removeEventListener('click',function(){ alert('remove event listener of button4'); }); 这段代码之所以没有起作用是因为实际上，第二个参数与addEventListener()中的那个是完全不同的函数。正确的做法：
var hadler = function(){ alert('add event listener of button4'); }; bn4.addEventListener('click',hadler,false); //有用 bn4.removeEventListener('click',hadler,false);