HTML绑定事件处理程序的三种方式

非IE浏览器

• 事件直接写在HTML标签中，且触发的函数也在其中，里面不能使用未经转义的HTML语法字符，比如&号，<号或>号
• 事件直接写在HTML标签汇中，触发的函数写在javaScript中，代码执行过程中，有权访问全局作用域中的任何代码，触发的函数有一个event事件对象（无需定义，不用传参，可以直接访问），也可以使用this值访问事件的目标元素。可以在函数中使用with语句扩展作用域（不推荐）
  缺点：
  1.在javaScript未加载时，用户触发了事件，但函数未加载，会导致错误，可以使用try{}.catch{}来解决
  2.如果在其中扩展事件处理程序的作用域链在不同的浏览器中会导致不同的结果。不同javaScript引擎的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错
  3.HTML与javaScript代码紧密耦合，不利于维护
• 通过javaScript指定事件处理程序
  1.使用DOM0级事件处理程序
  使用方式：操作元素的引用.on+事件名称 = 事件处理函数
  在代码运行前，不会触发事件处理程序，而且必须先加载了操作的元素才能加载其javaScript，否则报错
  事件处理程序是在元素的作用域中运行的，即this引用当前元素
  以此方式添加的事件处理程序会在事件流的冒泡阶段被处理
  将其事件处理程序设为null即可删除绑定的事件处理程序（使用HTML指定事件处理程序也可以删除掉）
  只能添加一个事件处理程序，前面的会被后面的覆盖
  2.使用DOM2级事件处理程序（不建议使用捕获事件）
  操作元素的引用.addEventListener( )：给元素添加事件处理程序。参数为：要处理的事件名、作为事件处理程序的函数、布尔值（true为捕获，false为冒泡），也是依附元素的作用域中运行，并且可以添加多个事件处理程序，多个事件处理程序会按照添加的顺序触发
  操作元素的引用.removeEventListener( )：移除元素的事件处理程序，参数与添加的一样才能移除事件处理程序，并且如果时间处理程序添加的函数为匿名函数则无法移除

IE中的事件处理程序
IE实现了与DOM中类似得两个方法：attachEvent( )和detachEvent( )，接受的参数相同：事件处理程序名称和事件处理函数，IE8及其更早版本只支持事件冒泡
使用attachEvent( )与DOM级方法主要区别在事件处理程序的作用域，DOM0级在元素的作用域内运行，DOM2级在全局作用域中运行，即this等于window
使用attachEvent( )也能添加多个事件处理程序，但触发的顺序与addEventListener( )相反
detachEvent( )与removeEventListener( )用法相同，且同样无法移除匿名函数