javaScript事件

事件处理程序

HTML事件处理程序

某个元支持的某种事件都可以使用一个与相应事件处理程序同名的HTML特性来指定

<input type='button' value='click me' onclick='alert('clicked')'>

DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性

var btn = document.getElementById("myBtn");
btn.onclick = function{
    alert(this.id);
}

DOM2级事件处理程序

• 定义了两个方法，用于处理指定和删除事件处理程序的操作
  
  • addEventListener()
  • removeEventListener()
• 所有DOM节点都包含这两个方法
• 参数:要处理的事件名，作为事件处理程序的函数，布尔值
  
  • 布尔值：true–捕获阶段调用函数，false–冒泡阶段调用函数

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

好处

使用DOM2级方法添加事件的好处是可以添加多个事件处理程序，会按照它们的顺序触发

通过addEventListener()添加的事件处理程序只能用removeEventListener()移除，参数要与添加时相同，所以如果通过addEventListener()添加的匿名函数将无法移除

注：大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，最大限度的兼容各个浏览器