DOM事件速记（一）

事件流

• IE冒泡 （从内部到外部）
• Netscape捕获流（从外部到内部）
• DOM事件流
  • 事件捕获阶段
  • 处于目标阶段
  • 事件冒泡阶段

事件处理程序

• HTML事件处理程序（代码耦合度高）

<input type="button" onclick="alert(1)"/>

• DOM0级事件处理程序

var btn = document.querySelector("input");
btn.onclick = function(){
    alert(this);
}

• DOM2级事件处理程序 ps:DOM1级主要是HTML和XML规范
  添加事件：第三个参数默认为fales，表示添加到冒泡阶段；true表示添加到事件捕获阶段
  移除事件：函数必须是存在引用的才可移除，即添加的事件处理函数是匿名函数者不可移除

let handler = function(){
    alert(event);
}
//添加事件监听
btn.addEventListener("click",handler,false);
//移除事件监听
btn.removeEventListener(("click"),handler,false);

• IE事件处理程序
  需要注意的是IE添加事件的顺序是和DOM2 相反的,即谁在后面谁先出现

btn.attachEvent("onclick",handler);
btn.detachEvent("onclick",handler);

事件对象