我们知道JavaScript与HTML之间的交互是通过事件实现的。事件最早是在IE3和Netscape Navigator 2中出现的，当时是作为分担服务器运算负载的一种手段。 通俗地理解，事件就是用户或浏览器自身执行的某种操作。而事件处理程序即为响应某个事件的函数。抽出主干，即事件处理程序为函数。 我们又把事件处理程序称为事件侦听器。 事件处理程序是以"on"开头的，因此对于事件on的时间处理程序即为onclick。时间处理程序在JavaScript中大致有五种，下面会根据这五种不同的时间处理程序分为5部分来介绍。
1.HTML事件处理程序
2.DOM0级事件处理程序
3.DOM2级事件处理程序
4.IE事件处理程序
5.跨浏览器的事件处理程序
第一部分：HTML事件处理程序
什么使HTML事件处理程序呢？显然，通过名字就可以猜到，它是卸载HTML中的函数（事件处理程序）。初学者大多用到的事件处理程序即为HTML事件处理程序。下面举例：
例1：
<button>点我</button>
这条代码即为事件处理程序，点击button后，会弹出弹框，显示success。
特点：HTML事件处理程序中Javascript代码作为了onclick特性的值，因此，我们不能在JavaScript代码中使用未经转义的HTML语法字符，如&(和号)、""（双引号）、<(小于号)、>（大于号）等等。所以这个例子中字符串我使用了单引号而没有使用双引号。看下面在JavaScript代码中使用了未经转义的HTML语法字符。
例2：
<buttonsuccess")">点我</button>
这时，我在success外使用了HTML语法字符""(双引号)，这时不会弹出窗口，而是报错语法错误。但是我如果还是希望使用双引号呢？ 这时就要用"实体来代替HTML中的语法字符。如下例所示：
例3：
<button>点我</button> <!-- 正常弹出窗口-->
这个例子中我们在JavaScript代码中使用了HTML实体而没有使用HTML语法字符，这时就不会报错了。
例4：
<button>点我</button> <!-- 正常弹出窗口--> <script> function show(){ alert("success"); } </script>
这个例子中我们调用函数，而把函数定义放在了script中，这样也是可以的。因为：事件处理程序中的代码在执行时，有权访问到全局作用域中的任何代码。这句话怎么理解呢？ 实际上，我们可以在chrome中观察button标签的作用域链。如下所示：
接下来我们再看看script所在的作用域，如下图所示：
可以看到script标签就在全局作用域。
也就是说目前button中的HTML事件处理函数在作用域链的最前端，而Script在全局作用域，所以“事件处理程序中的代码在执行时，有权访问到全局作用域中的任何代码。”这句话就不难理解了。
例5：
<button>点我</button>
这时浏览器弹出窗口显示：click。这个例子是什么意思呢？注意到我并没有在event.type外加单引号，说明这并不是字符串。实际上，event是局部对象--在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。而这里是弹出了对象了类型，即为click。
HTML事件处理程序的三个缺点（重点）：
1. 时差问题。 因为用户可能在HTML元素一出现就开始触发相应事件，但是有可能该事件的脚本（如例4中show()函数的函数定义在script中）还没有加载完成，此时不具备执行条件，故报错。
解决方法：将HTML事件处理程序封装在一个try-catch块中，以便错误不会浮出水面。
<input type="button" value="click me">
2.这样扩展事件实例程序的作用域链在不同的浏览器中会导致不同的结果（例4中我是在chrome中查看的作用域链，其他浏览器不一定是这样的，请注意）。不同JavaScript引擎遵循的标识符解析规则略有差异，很有可能会在访问非限定对象成员时出错。
3.HTML和JavaScript代码紧密耦合。 结果是：如果要更换事件处理程序，就必须改动两个地方--HTML代码和JavaScript代码。
那么怎么解决上面的问题呢？ DOM0级事件处理程序是一个不错的选择!
第二部分：DOM0级事件处理程序
DOM0级事件处理程序用的也非常普遍。之所以成为DOM0级，我认为是当时还没有出DOM标准，而IE和Netscape Navigator两者使用的时间处理程序（不知是否合理，望批评指正）。 总之，我们先看看下面的例子吧。
例6：
<button>点我</button> <script> var button=document.getElementById("button"); button.onclick=function(){ alert("clicked"); } </script>