JavaScript中事件处理、事件捕获和事件冒泡
今天在牛客网上刷题，遇到了一个问题没有答对，主要是针对这道题，对自己的知识剖析一下，解决问题的关键点。下面就是我对JavaScript中事件处理、事件捕获和事件冒泡的一个理解和分享：
JS中的事件处理
首先先说一下事件处理的基本概念吧！
事件处理的基本概念
1.事件是浏览器响应用户交互操作的一种机制，利用JavaScript事件处理机制可以开发出更具有交互性，更容易使用的web页面。
2.事件定义了用户与web页面交互时产生的各种操作。浏览器在大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。
1.什么是事件
事件就是文档和浏览器的特定的交互瞬间 ，JS和HTML之间的交互就是通过事件实现的
2. 事件流
事件流描述的是从页面中接受事件的顺序，包含IE提出的事件冒泡与Nescape提出的事件捕获流。浏览器默认的是事件冒泡流。
两种思想：
IE的事件流叫做事件冒泡，即事件开始时由具体的元素接收，然后逐级向上传播到较为不具体的节点。
Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的DOM节点应该更早接收事件，而最具体的节点应该最后接收到事件。
事件冒泡
微软提出了名为事件冒泡（event bubbling）的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#myDiv{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div id="myDiv"></div>
</body>
</html>
当用户点击了<div>元素,click事件将按照<div>—><body>—><html>—>document的顺序进行传播。若在<div>和<body>上都定义了click事件，如下：
<script type="text/javascript">
var div=document.getElementById("myDiv");
div.οnclick=function(event){
alert("div");
};
document.body.οnclick=function(event){
alert("body");
};
</script>
点击<div>，将先输出“div”,再输出“body”
IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。
事件捕获
网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。当用户点击了<div>元素，采用事件捕获，则click事件将按照document—><html>—><body>—><div>的顺序进行传播。
若在<div>和<body>上都定义了click事件，如下：
<script type="text/javascript">
var div=document.getElementById("myDiv");
div.addEventListener("click",function(event){
alert("div");
},true);
document.body.addEventListener("click",function(event){
alert("body");
},true);
</script>
点击<div>，将先输出“body”，再输出“div”。
IE9，chrome，Firefox，Opera，Safari都支持事件捕获，但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播，但是现在的浏览器实现都是从window对象开始捕获事件。
