关于JavaScript 的事件综合分析第2/2页

针对您提出的问题，我为您提供一份关于JavaScript事件的完整攻略，包含以下几个部分：

1. 事件概述：介绍什么是JavaScript事件以及事件的种类。
2. 事件注册：讲解如何在HTML中注册事件，分别介绍html属性和DOM API两种方式。
3. 事件处理程序：介绍如何编写事件处理程序以响应事件，包括内联事件处理和外部事件处理。
4. 事件传播机制：讲解事件究竟是如何在DOM中传递的，包括事件冒泡和事件捕获两种机制。
5. 事件对象属性：介绍到事件对象的属性和方法，如何获取事件的相关信息。
6. 事件委托：说明什么是事件委托，即事件代理，以及如何使用事件委托。

以下给出两个示例，以帮助您更好地理解事件的相关概念。

示例一：注册事件
HTML:

<div id="myDiv">点击我触发事件</div>

JS:

var myDiv = document.getElementById("myDiv");

//使用属性注册事件
myDiv.onclick = function() {
  alert("点击了myDiv！");
}

//使用DOM API注册事件
myDiv.addEventListener("click", function() {
  alert("点击了myDiv！");
}, false);

示例二：事件传播机制
HTML:

<div id="outer">
  <div id="inner">点击我触发事件</div>
</div>

JS:

var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("click", function() {
  alert("点击了outer！");
}, false);

inner.addEventListener("click", function() {
  alert("点击了inner！");
}, false);

当我们点击inner元素时，会先触发inner上的事件处理程序，然后事件开始向外传播，依次触发outer上的事件处理程序。此时，如果我们将外层事件处理程序的参数设为true，即

outer.addEventListener("click", function() {
  alert("点击了outer！");
}, true);

那么事件会从外向内传播，先触发outer上的事件处理程序，然后才会触发inner上的事件处理程序。

希望以上攻略和示例能够对您理解JavaScript事件的相关概念有所帮助。