DOM事件
addEventListener()
捕获和冒泡

DOM事件(默认冒泡)

在 W3C 2 级 DOM 事件（DOM Level 2）中规范了事件模型。

面试题-事件如何触发函数

事件通常与函数结合使用，下面哪种写法可以正确调用函数(方法)

<div id="x" onclick="myFn"></div> // ×
<div id="y" onclick="myFn()"></div> // √
<div id="z" onclick="myFn.call()"></div> // √
x.onclick = myFn; // √
x.onclick = myFn(); // × undefined，因为myFn()没有写return，则默认return undefined
x.onclick = myFn.call(); // ×

addEventListener()方法

http://www.runoob.com/jsref/met-element-addeventlistener.html

如果一个对象绑定了多个click事件，那么就得用addEventListener()方法
语法：ele.addEventListener(‘click’, myFn, 在捕获or冒泡阶段执行)，默认参数空或者false表示冒泡执行
监听的事件绑定一个队列，队列里按顺序排列着函数(方法)

绑定多个事件

btn.onclick = myFn1;
btn.onclick = myFn2;
//myFn2的结果会覆盖myFn1
btn.addEventListener("click", myFn1);
btn.addEventListener("click", myFn2);
//事件监听可以实现同一个对象绑定多个同样的事件执行不同的函数

addEventListener()里面是个队列，只有当事件发生时才会执行里面的函数**

function a(){
	console.log('a');
}
function b(){
	console.log('b');
}
function c(){
	console.log('c');
}
btn.addEventListener("click", a);
btn.addEventListener("click", b);
btn.removeEventListener("click", a);
btn.addEventListener("click", c);
btn.removeEventListener("click", c);
//最终在这个队列里只剩下函数b
因此，点击按钮后只打印出 'b'

jquery的.one()方法原理

function fn(){
	console.log(1);
	btn.removeEventListener('click', fn);
}
btn.addEventListener('click', fn);

冒泡 vs 捕获

http://www.runoob.com/js/js-htmldom-eventlistener.html

先捕获，后冒泡，默认队列里的函数全部放在冒泡阶段执行

冒泡：点击最内层元素后，最内层元素的事件先触发，接着触发中层元素的事件，最后触发最外层的事件。
捕获：点击最内层元素后，最外层元素的事件先触发，接着触发中层元素的事件，最后触发内层的事件。

结构a>b>c
x.addEventListener('click', a);
y.addEventListener('click', b);
z.addEventListener('click', c);
//点击c，默认打印出c,b,a
x.addEventListener('click', a,true);
y.addEventListener('click', b);
z.addEventListener('click', c);
//点击c,打印出a,c,b

默认冒泡阶段执行队列里的函数

当设置a的捕获为true时，a队列在a的捕获阶段执行
于是先执行a队列里的函数，然后执行c，最后执行b

面试题-捕获冒泡顺序

原则上，先捕获，后冒泡，函数(方法)队列在冒泡阶段执行
但是

结构a>b>c
z.addEventListener('click', fn冒泡,false);
z.addEventListener('click', fn捕获,true);
// 先执行fn冒泡，再执行fn捕获
同一个元素，既有捕获，又有冒泡时，按照代码书写顺序执行

取消冒泡

http://caibaojian.com/javascript-stoppropagation-preventdefault.html

1	ev.stopPropagation()

阻止默认行为

1	ev.preventDefault()