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