事件简介

JavaScript 与 HTML 之间的交互是通过事件实现的。事件最早是在 IE3 和Netscape Navigator 2 中出现的，当时是作为分担服务器运算负载的一种手段。在 IE4 和 Navigator 4 发布时，这两种浏览器都提供了相似但不相同的 API，这些 API 并存经过了好几个主要版本。DOM2级规范开始尝试以一种符合逻辑的方式来标准化 DOM 事件。IE9、Firefox、Opera、Safari 和 Chrome 全都已经实现了“DOM2 级事件”模块的核心部分。IE8 是最后一个仍然使用其专有事件系统的主要浏览器。

事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。IE9、Opera、Firefox、Chrome 和 Safari 都支持 DOM 事件流；IE8 及更早版本不支持 事件捕获。

事件处理程序

有四种指定事件处理程序的方法

• 使用HTML属性指定，如：

// 使用这种方式指定事件处理程序的话，相当于将onclick属性值作为一段js代码包裹在一个函数里面然后指给该元素对象的onclick属性
// 该函数内部有一个局部变量event
click me

// 也可以在里面执行其他函数，在该函数内部可以访问全局作用域里的其他函数
click me

// 这个动态创建的函数使用with扩展作用域
// with语句的作用就是在代码块内部访问变量时，现将其看作局部变量，如果找不到，就在传入的参数对象内部查找该属性
function(){ 
  with(document){ 
    with(this){ 
      //元素属性值
    } 
  }
} 
// 因此下面的innerText === this.innerText
click me

// 如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素的入口，这个函数就变成了如下所示：
function() {
  with(document) {
    with(this.form) {
      with(this) {
        //元素属性值
      }
    }
  }
}
// 这样的下面的代码就可以理解了
form method="post"> 
  
  
 

• DOM0级指定方法

var btn = document.getElementById("myBtn");
// 这种方法比较简单，在冒泡阶段触发，不过不能为同一个元素添加多个事件处理程序
btn.onclick = function() {
  alert(this.id); //"myBtn" 
};
//删除事件处理程序
btn.onclick = null; 

• DOM2级指定方法（IE9以上）

var btn = document.getElementById("myBtn");
// 第三个参数为true，表示在捕获阶段触发，一般不使用
btn.addEventListener("click", function(e) {
  alert(this.id);
}, false);
// 主要好处是可以添加多个事件处理程序，会按照添加它们的顺序触发

// 移除时传入的参数要与添加处理程序时使用的参数相同。这也意味着匿名函数将无法移除
var btn = document.getElementById("myBtn"); 
var handler = function(){ 
  alert(this.id); 
}; 
btn.addEventListener("click", handler, false); 
btn.removeEventListener("click", handler, false); //有效！

• IE8及以下使用的方法

// 只支持冒泡阶段触发，第一个参数和DOM2相比多了'on'
var btn = document.getElementById("myBtn"); 
btn.attachEvent("onclick", function(){ 
  // this指向window而不是元素本身
  alert(this === window); //true 
  alert("Clicked"); 
}); 
// 也可以用来为一个元素添加多个事件处理程序，不过不是以添加它们的顺序执行，而是以相反的顺序被触发。
// 和DOM2一样，匿名函数将无法移除

事件对象

一些比较重要的属性

• currentTarget：代表被触发事件处理程序的那个元素
• target：代表事件的实际目标，一次交互只会有唯一一个目标
• eventPhase：1-捕获阶段 2-处于目标上 3-冒泡阶段
• preventDefault()：取消事件的默认行为
• stopPropagation()：取消事件的进一步捕获或冒泡

IE的事件对象的一些比较重要的属性

• srcElement：等于target
• cancelBubble：默认为false，但将其设置为true就可以取消事件冒泡（与stopPropagation()方法的作用相同，不过只能取消冒泡）
• returnValue：默认为true，但将其设置为false就可以取消事件的默认行为（与preventDefault()方法的作用相同）

事件委托的优缺点

https://www.cnblogs.com/wangdapeng/p/6601405.html