事件流的捕获和冒泡 ---- 事件对象 this和e.target的异同

事件流的捕获和冒泡 ---- 事件对象
this和e.target的异同

浏览器最初开始支持事件时，同一个事件仅仅只有一个元素相应。后来认为仅仅支持一个单一事件是不够的，而IE4之后提出了事件流的概念，一个元素可以支持多个事件。常见的事件流有捕捉型事件和冒泡型事件。

1、事件捕获
捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

2、事件冒泡
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

事件流的捕获和冒泡 ---- 事件对象
this和e.target的异同

为了更好地体会，我们现在写一个demo，html 和 css 如下：

事件流的捕获和冒泡 ---- 事件对象
this和e.target的异同

打开浏览器查看，效果如下：

事件流的捕获和冒泡 ---- 事件对象
this和e.target的异同

接下来，我需要给它添加一些JS代码：

var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");

d1.addEventListener("click",function(){
      this.style.background = "orange";
      console.log(111);
})
d2.addEventListener("click",function(){
      this.style.background = "green";
      console.log(222);
})
d3.addEventListener("click",function(){
      this.style.background = "blue";
      console.log(333);
})