js事件流

一：事件冒泡和事件代理
事件：事件是文档和浏览器窗口中发生特定交互的瞬间，当我们与浏览器中的web页面进行某些类型交互的时候，事件就发生了
事件流：事件流描述的是页面中接受事件的顺序，微软为事件冒泡，网景为事件捕获
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

image.png

事件捕获：从不太具体的dom节点应该更早接收到事件，而具体的节点最后接收到事件（我们借用addEventListener来模拟事件捕获流）

image.png

DOM事件流：dom2事件规定事件流包含三个阶段"事件捕获/目标阶段/事件冒泡"首先发生的事件捕获为截获事件提供机会，然后实际目接收事件，最后一个阶段时事件冒泡阶段，在这个阶段对事件做出响应；dom事件流中，事件的目标在捕获阶段不会接收到事件，这意味着捕获阶段事件从document到ul停止，然后目标阶段事件在li上发生，并在事件处理中被堪称冒泡阶段的一部分，然后冒泡阶段发生事件又传回document

image.png

关于dom2事件处理程序：dom2事件定义了两个方法：addEventListener和removeEventListener他们都包含三个参数（1.处理事件的的方式click..2.事件处理函数（如果是删除函数必须是命名函数3.bool值为true为事件捕获阶段调用，默认为false事件冒泡阶段调用）dom2事件处理程序的好处时可以添加多个事件处理程序，事件处理会按照添加的顺序触发，addEventListenert添加的事件只能用removeEventListener来移除，这也意味着添加的匿名函数将无法移除

image.png

image.png

dom0的事件处理程序

image.png

image.png

二：事件委托
事件委托：利用事件冒泡。指定一个事件处理程序来管理某一类型的所有事件，dom需要由事件处理程序，我们可以直接给每个dom设事件处理程序，如果我们有10000个li添加相同的点击事件，我们可能会用for循环来遍历所有li，然后逐个给它们添加事件，js访问dom的操作越多。引起浏览器重绘与重排的次数也会增多，就会延长整个页面的交互就绪事件，这就是为什么性能优化的的主要思想是减少dom操作，这里如果采用事件委托，就会将所有的操作都放在js程序里。与dom的操作就只需要交互一次。这样就大大减少了与dom的操作，每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就差了。
事件委托的原理：事件委托利用事件冒泡原理来实现，比如页面有这么一个节点树，div>ul>li，我们给li添加click事件那么这个事件就会一层一层向上执行,执行顺寻li>ul>div，也就是我们给最外面的div添加点击事件。那么里面的ul/li都会冒泡到最外层div，所以都会触发，这就是事件委托，委托他们的父级代为执行事件。
事件委托实例：

image.png

event对象提供了一个属性叫做target，返回事件的目标节点，我们称为事件源，也就是说target可以表示当前事件操作的dom,但不是真正操作dom,我们根据nodeName来判断节点名称

image.png

image.png

事件委托的另一个好处是js动态增加的新节点也会获得同类型的操作

image.png

三：js阻止事件冒泡和默认事件
w3c:e.stopPropagation
ie:window.event.cancelBubble = true
默认事件：是指目标元素的默认行为比如a标签会跳转链接 form会提交表单
w3c:e.preventDefault()
ie:window.event.returnValue = false
另外js中的return false也可以阻止默认行为jq中的return false既可以阻止默认行为也可以阻止冒泡
js学习（ECMAScript，DOM，BOM）: https://www.jianshu.com/p/b7136540b379