《javascript高级程序设计》读书笔记
事件的概念
javascript与html 之间的交互是通过事件实现的。事件就是文档或浏览器窗口发生的一些特定的交互瞬间。通过使用处理程序来预定事件本身也符合观察员设计模式。
什么是事件流：
事件流是描述从页面中接收事件的顺序【从内到外(冒泡)，从外到内(捕获)】;
IE与原来的NetScape(网景)，对于事件流提出的是完全不同的顺序。IE团队提出的是事件冒泡流；NetScape的事件流是事件捕获流。现在主流的是时间冒泡机制
简单的讲：当给一个DIV绑定一个点击事件，又在DIV里面放一个按扭并给按扭也绑定一个点击事件，此时你点击里面按扭的同时，外面DIV的点击事件也会被触发。
DOM事件流的三个阶段
- 事件捕获阶段
- 处于目标阶段
事件冒泡阶段
事件对象：
事件对象：在触发DOM上的某个事件的时候，会产生一个事件对象event，而在这个对象当中会包含着所有与事件有关的信息。
事件对象其中有两个信息，我们最为常用，分别是type和target：
type表示的是被触发事件的类型；
target表示的是事件的目标。
其他：
bubbles：表示事件是否冒泡
cancelable：表示是否可以取消事件的默认行为
currentTarget：表示事件处理程序当前正在处理事件的那个元素
defaultPrevented：表示是否调用了preventDefault()
detail：表示的是与事件相关的细节信息
eventPhase：调用事件处理处理程序的阶段：1表示捕获阶段、2表示处于目标、3表示冒泡阶段
stopPropagation():取消事件的进一步捕获和冒泡 （*）
ps:在jquery 中用函数中用return false，具有 defaultPrevented和 stopPropagation的功用
JavaScript事件的三种绑定方式【事件处理程序】：
事件绑定方式一【HTML事件处理程序】：就是将事件直接内嵌内HTML结构标签元素内的 【不推荐用，因为不灵活】
事件绑定方式二【DOM 0级事件处理程序】：就是把一个函数/方法赋给一个事件处理程的 属性如：id 、class 、元素名等 【用得最多，兼容性好，简单，灵活，跨浏览器 ；缺点：不能绑定多个同类型事件】
事件绑定方式三【DOM 2级事件处理程序 / 监听事件】：addEventListener()和removeEventListener()监听事件接收3个参数：事件类型(注：不要加 on), 处理函数 , false:在冒泡阶段调用事件处理程序/true:不补货阶段调用事件处理程序
事件类型：
在JavaScript中事件大至分为了三大类，分别是一般事件、表单事件、页面事件这3种。
UI事件：如load（页面完全加载后window上触发）、unload（页面卸载后再window上触发）、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。
焦点事件：如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，有一点需要引起注意，这一类事件不会发生冒泡！
鼠标与滚轮事件：如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行操作时所触发的。click、dblclic都会依赖其他先行事件的触发
滚轮事件：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。
文本事件：textInput，在文档中输入文本触发。
键盘事件：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。一个重要的概念就是按键码 event.keyCode(与ascll值一样)
合成事件：DOM3级新增，用于处理IME的输入序列。所谓IME，指的是输入法编辑器，可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
变动事件：DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等，当底层DOM结构发生变化时触发。IE8-不支持。
变动名称事件：指的是当元素或者属性名变动时触发，当前已经弃用！
对于事件的基本类型，随着HTML5的出现和发展，又新增了HTML5事件、设备事件(单点触控)、触摸事件touch、手势事件等各种事件等。
几个区域的概念
- 客户区坐标：event.clientX/y
- 页面坐标位置 ：event.pageX/Y(在没有页面滚动时 pageX和clientX值一样)
- 屏幕坐标位置：ScreenX/Y
事件方面性能优化：事件委托和事件处理程序的移除
在JavaScript代码当中，添加到页面中的事件越多，页面的性能也就越差。导致这一问题的原因主要有：
每个函数都是对象，都会占用内存。内存中对象越多，性能也就越差。
必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
为了进行页面的性能优化，因此我们会采用两种方法，就是上面提到的——事件委托和事件处理程序的移除。
事件委托：
什么时候使用事件委托，其实，简单来说，当时一个页面事件处理程序比较多的时候，我们通常情况下会使用它。
事件委托主要利用了事件冒泡，只指定一个事件处理程序，就可以管理一个类型的所有事件。例如：我们为整个一个页面制定一个onclick事件处理程序，
此时我们不必为页面中每个可点击的元素单独设置事件处理程序
事件委托：给元素的父级或者祖级，甚至页面绑定事件，然后利用事件冒泡的基本原理，通过事件目标对象进行检测，然后执行相关操作。其优势在于：
大大减少了事件处理程序的数量，在页面中设置事件处理程序的时间就更少了（DOM引用减少——也就是上面我们通过id去获取标签，所需要的查找操作以及DOM引用也就更少了）。
document（注：上面的例子没有绑定在document上，而是绑定到了父级的div上，最为推荐的是绑定在document上）对象可以很快的访问到，而且可以在页面生命周期的任何时点上为它添加事件处理程序，
并不需要等待DOMContentLoaded或者load事件。换句话说，只要可单击的元素在页面中呈现出来了，那么它就立刻具备了相应的功能。
整个页面占用的内存空间会更少，从而提升了整体的性能。
移除事件处理程序
每当将一个事件处理程序指定给一个元素时，在运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。连接数量也直接影响着页面的执行速度。
所以，当内存中存在着过时的“空事件处理程序”的时候，就会造成Web应用程序的内存和性能问题。
那么什么时候会造成“空事件处理程序”的出现呢？
文档中元素存在事件，通过一些DOM节点操作（removeChild、replaceChild等方法），移除了这个元素，但是DOM节点的事件没有被移除。
innerHTML去替换页面中的某一部分，页面中原来的部分存在事件，没有移除。
页面卸载引起的事件处理程序在内存中的滞留。
解决方法：
合理利用事件委托；
在执行相关操作的时候，先移除掉事件，再移除DOM节点；
在页面卸载之前，先通过onunload事件移除掉所有事件处理程序。