最后一个点击事件，假设showMessage()函数实在按钮下方，页面最底部进行定义。如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。为此，很多HTML事件处理程序都会被封装到try-catch块中，以便错误不会浮出水面，如下面的例子所示：
<input type="button" value="click me" onclick="try(showMessage();)catch(ex){}">这样，如果在showMessage()函数有了定义之前单击了按钮，用户将不会看到JavaScript错误，因为在浏览器有机会处理错误之前，错误就被捕获了。
note:
1）通过event变量可以直接访问事件本身，比如οnclick=”alert(event.type)”会弹出click事件。
2）this值等于事件的目标元素，这里目标元素是input。比如 οnclick=”alert(this.value)”可以得到input元素的value值。
JS写onlicke=function（）{}函数
var oBtn = document.getElementById("myButton"); oBtn.onclick = function () { alert('thanks'); };DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()、removeEventListener()。所有的DOM节点都包含这两个方法，并且接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 要在按钮上添加click事件处理程序，可以使用下面的代码
var oBtn = document.getElementById("btn1"); oBtn.addEventListener('click',function(){ alert(this.value); },false);因为第三个参数是false，所以它会在冒泡阶段被触发。 使用DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序。看下面的例子:
var oBtn = document.getElementById("btn1"); oBtn.addEventListener('click',function(){ alert(this.value); },false); oBtn.addEventListener('click',function(){ alert(this.id); },false);这里为按钮添加了两个事件处理程序，这两个事件处理程序会按照添加的顺序出发，因此会获得button的value，在获得其id。 如果第三个参数为true，那么看如下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById("btn1"); oBtn.addEventListener('click',function(){ alert('button click'); },true); var oBD = document.getElementsByTagName('body')[0]; oBD.addEventListener('click',function(){ alert('body click'); },true); } </script> </head> <body> <input type="button" value="click me" id="btn1"> </body> </html>那么先弹出‘button click’，后弹出“body click”。 那么这里解释一下： “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截取事件提供了机会。然后是实际的目标接收事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。看下图： 很显然事件捕获阶段是从不具体节点（文档）到目标点的，所以当第三个参数为true是，在捕获阶段就调用了事件处理程序。 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序是使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：
var oBtn = document.getElementById("btn1"); oBtn.addEventListener('click',function(){ alert(this.value); },false); oBtn.removeEventListener('click',function(){ alert(this.value); },false);看着参数一样，但实际上，第二个参数与传入addEventListener()中的那一个是完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：
function doSomething() { alert('hello'); } var oBtn = document.getElementById("div1"); oBtn.addEventListener('click',doSomething,false); oBtn.removeEventListener('click',doSomething,false);这个例子没有问题，因为在addEventListener()和removeEventListener()中使用了相同的函数
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8只支持事件冒泡，所以通过attachEvent()添加的时间处理程序都会被添加到冒泡阶段。
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); var handlerIE=function(){ alert("helloIE"); } var handlerDOM= function () { alert("helloDOM"); } myBtn.addEventListener("click",handlerDOM,false); myBtn.attachEvent("onclick",handlerIE); </script>note: attachEvent的第一个参数是onclick，而不是addEventListener的click
IE11只支持addEventListener！
IE9，IE10对attachEvent和addEventListener都支持！
TE8及以下版本只支持attachEvent！
删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。
和DOM事件一样，添加的匿名函数将无法删除。
所以为了能删除事件处理程序，代码可以这样写
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); var handler= function () { alert("hello"); } myBtn.attachEvent("onclick",handler); myBtn.detachEvent("onclick",handler); </script>note:IE事件处理程序中还有一个地方需要注意：作用域。
使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。 而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。 下面例子会弹出true。
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); myBtn.attachEvent("onclick",function(){ alert(this===window); }); </script>要保证处理时间的代码能在大多数浏览器下一致运行，只需要关注冒泡阶段。 第一个要创建的方法是addHandler(),他的职责是视情况分别使用DOM0级方法，DOM2级方法或IE方法来添加事件。这个方法的属于一个名叫EventUtil的对象，addHandler()方法接受三个参数：要操作的元素，事件名称和事件处理程序函数。 与addHandler()对应的方法是removeHandler()，他也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0级方法。 EventUtil的用法如下：
<script type="text/javascript"> var EventUtil = { addHandler:function (element,type,handler) { if (element.addEventListener) { element.addEventListener(type,handler,false); }else if (element.atachEvent) { element.atachEvent('on'+type,handler); }else { element['on'+type] = handler; } }, removeHandler:function (element,type,handler) { if (element.removeEventListener) { element.removeEventListener(type,handler,false); }else if (element.detachEvent) { element.detachEvent('on'+type,handler); }element { element['on'+type] = null; } } } </script>可以像下面这样使用EventUtil 对象：
var oBtn = document.getElementById("btn1"); var handler = function () { alert('clicked'); } EventUtil.addHandler(oBtn,'click',handler); EventUtil.removeHandler(oBtn,'click',handler);addHandler和removeHandler没有考虑到所有的浏览器问题，例如IE中的作用于问题。但是使用EventUtil进行添加和移除事件已经足够了。
