DOM：envent(事件模型)

DOM标准
dom1有两个版本
Document Object Model Events，events单独一个标准 他是属于dom标准之内的。主要学习dom level 2(也就目前使用最广泛的标准)

dom level0事件(W3c规范之前已经有了) ：onclick

1.html中答案是b，c。因为不加括号是不调用。

2. js中答案是a。因为onclick是函数属性，一调用它后边接的是函数。不加括号代码只这个函数。一旦用户点击，浏览器会自动调用函数。

   
   深度截图_选择区域_20180326120000.png

dom level2事件：addEventListener/removeEventListener(level 1就是汇总了一下0)

比如一个button，click有一个队列，mouseenter有一个队列，每次addEventListener就是往队列添加一个，removeEventListener就是移除一个。

1. xxx.onclick = function(){} ：不能重复监听，有可能覆盖别人的监听事件
2. xxx.addEventListener('click',function(){}) ：xxx拥有一个EventListeners队列，但是这个队列你不能访问，你需要addEventListener来给函数排个队，所以能多次使用监听事件。
   xxx拥有一个EventListeners队列，但是这个队列你不能访问，你需要addEventListener来排个队，所以能多次使用监听事件
   移除队列
   关于on和one的用法：one就是函数执行完之后，移除了事件。
   深度截图_选择区域_20180326151346.png

• envent
  下图中，如果点击儿子，排序是儿子-爸爸-爷爷(捕获)，因为envent默认参数除了事件，函数，第三个是false，第三个参数默认不显示，如果想要改变顺序只要第三个参数为true就可以（冒泡）。想让哪个排在前，就在哪个第三个参数添加true，跟代码顺序无关，如果监听的是同一个元素，这样就会按照代码顺序执行了。这就叫事件模型。
  深度截图_选择区域_20180326152844.png
  注意：如果一个元素本身被点击了(既有冒泡又有捕获，按代码顺序执行)
  深度截图_选择区域_20180326155336.png

默认冒泡事件，不传第三个参数，默认是false，就是冒泡阶段，函数在右边，为true是捕获阶段，函数在左边。