问题解决

1、了解BOM&DOM模型
2、了解JS 事件监听
3、了解DOM 事件流

---------------------------------------------------------------------------------------------------------------------------------

1.DOM又称文档对象模型，它是HTML和XML文档的编程接口，它主要描述了一些我们使用JS处理网页内容的方法和接口，它的目标是网页内容。比如说我们使用JS修改页面内容，其实就是操作的DOM文档。

BOM又称浏览器对象模型，它主要用来描述一些与浏览器行为相关的接口和方法，比如我们利用JS调整浏览器窗口大小、标签页跳转等等，这些都是BOM对象。

2.事件监听就是DOM对事件进行监听，知道什么时候发生了这个事件，从而执行一些写好的程序。

设置事件监听的方法主要有onxxx和addEventListener()两种；

事件的传播

先从外到内（捕获阶段），然后再从内到外（冒泡阶段）

而，onxxx这样的写法（DOM0级），只能监听冒泡阶段；所以需要用到addEventListener()方法（DOM2级）；

注意事项

• 最内部的元素不再区分捕获和冒泡阶段，会先执行写在前面的监听，然后执行后写的监听；
• 如果给元素设置相同的两个或多个同名事件，则DOM0级写法后面写的会覆盖先写的；而DOM2级会按顺序执行；

3.事件流简单来说就是事件执行的顺序流。DOM树中有大量的元素，元素之间出现嵌套时，给父子元素同时设置了事件，父子元素的事件执行会按照某种顺序执行，这就是事件流。当然，嵌套层级不限，最终事件流会贯穿当前元素和根元素()之间整个嵌套过程。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
顺序： 从下向上 即: 某个具体的元素 -> … -> body -> html -> document -> window

注：默认addEventListener()使用冒泡型事件流。

捕获型事件流（俗称挖洞）：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

顺序： 从上向下 即: window -> document -> html -> body -> … -> 某个具体的元素

capture捕获， bubble冒泡。

事件委托： 也可以成为事件代理，也就是将原本绑定在子元素身上的事件 委托 给父元素。让父元素去监听事件。其原理是利用事件冒泡。