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对象开始捕获事件。