javascript高级开发学习笔记九

事件

1.事件流

            事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

            事件捕获：不太具体的节点应该更早接受事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

            DOM事件流：DOM2级事件规定的事件包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

2.事件处理程序：事件就是用户或浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头。

            （1）HTML事件处理程序：事件处理程序有一些独到之处。第一：这样会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象。在这个函数内部，this值等于事件的目标元素。第二：可以像访问局部变量一样访问document及该元素本身的成员。

            （2）DOM0级事件处理程序：通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每个元素都有自己的事件处理程序属性，这些属性通常全部小写。将这个属性设置为一个函数，就可以 指定事件处理程序。使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行。

            （3）DOM2级事件处理程序：DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListtener()和removeEventListener()。所有DOM节点中都有这两个方法，接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值为true，表示在捕获阶段调用事件处理程序；false表示在冒泡阶段调整事件处理程序。与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素作用域中运行。DOM2方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

                      通过addEventListener()方法添加的事件处理程序只能用removeEventListener()方法来移除。移除时参数与添加的参数一致。也就是说通过addEventListener()方法添加的匿名函数无法移除。

                      大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段。

            （4）IE事件处理程序：IE实现了与DOM类似的两个方法：attachEvent()和detachEvent()。这两个方法接收两个参数：事件处理程序名称、事件处理程序函数。只支持事件冒泡。作用域为全局作用域。

            （5）跨浏览器的事件处理程序

                      第一个要创建的方法：addHandler()，它的职责是视情况分别使用DOM0级方法、DOM2级方法、IE方法来添加事件。这个方法属于一个叫EventUtil的对象。该方法接收3个参数：要操作的元素、事件名称、事件处理程序的函数。与addHandler()对应的方法是removeHandler()，它接收相同的参数，这个方法用于移除之前添加的事件处理程序。

3 事件对象：在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

            （1）DOM中的事件对象：兼容DOM的浏览器会将一个event对象传入到事件处理程序中。

                       要阻止特定事件的默认行为，可以使用preventDefault()方法。只有cancleable属性设置为true的事件，才可以使用preventDefsult()来取消默认行为。另外，stopPropagation()方法用于立即停止事件在DOM层次中的传播。

            （2）IE中的事件对象：在使用DOM0级添加事件处理程序时，event作为window对象的一个属性存在。如果事件处理程序使用attachEvent()添加的，那么就会有一个event对象作为参数传入事件处理程序中。

            （3）跨浏览器的事件对象：EventUtil

4 事件类型：UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件、变动名称事件。

            （1）UI事件：DOMActivate(表示元素已经被用户操作激活)

                                      load(当页面在完全加载后在window上面触发，当所有框架都加载完成时在框架上面触发，当图像加载完成时在img上触发，或者在嵌入的内容加载完成时在<object>元素上面触发)

                                      unload(当页面完全卸载后在window上面触发，当所有框架都卸载完成后在框架上触发，当嵌入的内容卸载完成后在<object>元素上触发)

                                      abort(在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上触发)

                                      error(当发生javascript错误时在window上触发，当无法加载嵌入的内容时在<object>上触发，当框架无法加载时在框架上触发)

                                      select(当用户选择文本框中的一个或多个字符时触发)

                                      resize(当窗口或框架的大小变化时，在window或框架上触发)

                                      scroll(当用户滚动带滚动条的元素中的内容时，在该元素上触发)

             （2）焦点事件：焦点事件会在页面获取或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，可确定用户在页面上的行踪。

                                     blur(在元素失去焦点时触发。这个事件不冒泡)

                                     DOMFocusIn(在元素获得焦点时触发)

                                     focus(在元素获得焦点时触发。这个事件不冒泡)

                                     focusin(元素在获得焦点时触发)

                                     focusout(在元素失去焦点时触发)

               （3）鼠标与滚轮事件：click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup

               （4）键盘与文本事件：keydown、keypress、keyup

               （5）复合事件：

               （6）变动事件：

               （7）HTML5事件：

               （8）设备事件：

               （9）触摸和手势事件：

5 内存和性能

              （1）事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

              （2）移除事件处理程序：在不需要的时候，移除事件处理程序。

6 模拟事件

              （1）DOM中的事件模拟：可以在documet对象上使用createEvent()方法来创建event对象。接受一个参数，要创建事件类型的字符串（UIEvents、MouseEvents、MutationEvents、HTMLEvents）。