事件

js组成：ECMA语法，规定了js的基本规则，类似于使用var定义变量，使用for来规定循环。
BOM：浏览器对象模型，就是使用我们的js来操作浏览器
DOM：文档对象模型，文档：我们的html标签在被浏览器渲染时会生成一颗标签树，我们把这棵树称为文档树或文档，每一个标签在js当中都可以抽象为一个对象。则DOM可以理解为，html标签在js当中的对象映射，则我们可以在dom中操作html元素
把浏览器当作最顶层的容器，抽象为文字可以理解为
window>>document>>html>>head/body>>其他元素
这个层级关系就可以理解为文档树了
则会出现以下概念
1》凡是出现在html中的标签被浏览器解析的时候都会被挂载岛dom树上
2》dom树上的每个标签都是一个独立的对象，既然是对象就会有属性和方法。我们在标签上注册一个事件，当事件满足条件被触发之后就会执行方法
3》事件的概念就是：让html在某些特定条件下执行了一段js脚本，某些特定的条件就是如单击，双击，鼠标经过等，这些条件以属性的形式呈现在html代码中，而触发执行的js脚本则通常为方法

这里我们需要了解三种，分别为最原始的html混合事件写法，dom0级写法、dom2级写法

1.最原始的写法：和html混合在一起写，缺点是代码高冗余，且无法添加多个事件处理函数如上文对事件的举例则为典型的html事件处理程序写法
2.dom0级：将html代码和js代码分离，且支持匿名函数，可以看到完美的改进了1的冗余缺憾，所有的事件相关操作都在js中完成
3.dom2级：ie使用attachEventListener其他非ie使用addEventListener，可以支持绑定多个事件，瞧吧，又一个缺憾被完美解决了_{，而且dom2级还可以自定义事件流，好，到这里大家留个心，这是第二部分我们要介绍的重点。牢记这个名词于心哦}
4.dom3级

事件流

事件流官网定义：描述的是从页面中接收事件的顺序，那~~~是谁从页面接收事件的顺序呢？接收的顺序有啥子呢？接收的范围呢？
接收顺序（事件流方式），需要我们了解：

事件捕获：什么叫捕获，其实不用扯那么多一句话从最不具体的到最具体的
事件冒泡：什么叫冒泡，正好和上面相反，从最具体的到最不具体的
为什么会有两种事件流方式呢？历史原因，ie提出的是事件冒泡，而w3c提出的是事件捕获。
现代浏览器高级了，那。。。。。嗯，我知道你要问啥，你一定要问浏览器内部是如何解析这两种事件流的，它的执行顺序：事件捕获-》目标阶段-》事件冒泡，一句话就是先捕获后冒泡

window-》dowument-》html-》head/body-》div或其他元素
注意昂，现在的浏览器都是从window开始滴，不管冒泡还是捕获其的传递范围一定是父子关系，也就是外层到内层，或者从内层到外层。假设我们给div添加一个事件方法，如果是事件捕获的话是从window开始，因为他是最不具体的元素，如果是冒泡的话则是从div开始，所以这里的具体不具体是相对于添加事件的元素而言的，说到这里，大家一定要晓得，我们要使用事件流通常要配合dom2级事件去写，要是读到这里你还不了解这个，那宝宝就让你气死鸟~哦，还要知道的一点我们现开发中多使用的事件流通常是冒泡，嗯这点随了ie了，但是要注意现在的主流浏览器默认就是冒泡，但通常我们在使用addEventListener这个方法的时候他的第三个参数还是会显示的指定为false，即为不捕获**。

捕获和冒泡的方式决定着浏览器何时去处理这个事件，如果我把事件声明在冒泡阶段处理，那么在捕获阶段即使捕获到了这个事件，事件也是不会被执行滴

Paste_Image.png

<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
one.addEventListener('click',function(e){
console.log('one');
},false);
two.addEventListener('click',function(e){
console.log('two');
},false);
three.addEventListener('click',function(e){
console.log('three');
},true);

使用的是dom2级中的非ie方法，从代码中可以看到one和two为冒泡，three为捕获
当我们点击最里面的div的时候，打印数序应该为three->two->one
最后还是冒泡的执行顺序