Javascript-事件总结

Posted 2020-08-06 只要闪电降临 就会有跳舞的火焰

        高程：第十三章 事件

【事件流】表述的是从页面接收事件的顺序。
1、事件冒泡流：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。所有浏览器都支持。
2、事件捕获：与事件冒泡相反，事件捕获的用意在于在事件到达预定目标之前捕获他，（很少有人用，除非特殊情况）。
3、DOM事件流：分为三个阶段：事件捕获阶段，处于目标阶段（实际的目标接收到事件）和事件冒泡阶段（这个阶段对事件发生应）。

【事件处理程序】即响应某个事件的函数。事件处理程序的名字以on开头。
1、html事件处理程序：缺点：首先存在时差问题，第二个缺点是这样的话扩展事件处理程序的作用域链在不同的浏览器中会导致不同结果。第三，HTML与javascript代码紧密耦合，要改动事件处理程序需改动两个地方。
2、DOM0级事件处理程序：（通过javascript指定事件处理程序）简单，具有跨浏览器优势，首先必须取得一个要操作的对象的引用。每个属性都有自己的事件处理程序，这些属性通常全部小写。例如：btn.onclick=function(){},要删除这个事件处理程序，只需：btn.onclick=null;
3、DOM2级事件处理程序：定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListene().他们接受三个参数（要处理的事件名、作为事件处理程序的函数和一个布尔值）布尔值是true，表示在捕获阶段调用事件处理程序，为false，表示在冒泡阶段调用事件处理程序。这个方法添加事件处理程序的好处在于可以添加多个事件处理程序。执行顺序与添加顺序相同。通过addEventListener()添加的事件处理程序只能使用removeEventListener()移除，她们必须传入相同的参数。大多数情况下，将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。
4、IE事件处理程序：两个方法：attachEvent（）和detachEvent（），接受两个相同的参数，即事件处理程序名和事件处理程序函数。在使用attachEvent（）的情况下，事件处理程序会在全局作用域中进行，这里this=window。同样attachEvent（）可以为一个元素添加多个事件处理程序，执行顺序于添加顺序相反。
5、跨浏览器的事件处理程序：方法：addHandler（）和removeHandler（），接受相同的三个参数：要操作的元素，事件名称和事件处理程序的函数。

【事件对象】
1、DOM中的事件对象：兼容DOM的浏览器会将一个event对象传入到事件处理程序中。要阻止特定事件的默认行为，可以使用preventDefault()方法。stopPropagation（）方法用于立即停止事件在DOM层次中的传播。只有在事件处理程序执行期间，event对象才会存在。
2、IE中的事件对象：在使用DOM0级的方法添加事件处理程序时，event作为window的一个属性存在，如果是通过html特性指定的事件处理程序，可以通过一个名叫event的变量来访问event的对象。因为事件处理程序的作用域是根据指定他的方式来确定的，所以不能认为this会始终等于事件目标，所以使用event.src.Element比较保险。returnValue属性相当于DOM中的preventDefault()方法，用来取消给定事件的默认行为，只需将returnValue的值设置为false。
3、跨浏览器的事件对象：给EventUtil对象添加方法来实现获取对象的信息，getTarget()方法返回事件的目标。preventDefault()方法，stopPropagation（）方法在这里同样有用。

【事件类型】
1、UI事件：指那些不一定与用户操作有关的事件。
load事件：当页面加载完后触发-onload。
unload事件：在文档完全卸载之后触发。只要用户从一个页面切换大另一个页面就会触发unload事件，利用这个事件更多的是清用，以避免内存泄漏。同样也可以指定onunload事件处理程序。

resize事件：但浏览器窗口被调整到一个新的高度或宽度时，就会触发这个事件，在window窗口上面触发，可以通过onresize特来指定事件处理程序。scroll事件：在window对象上发生，表示页面中相应元素的变化。在混杂模式下可通过scrollleft和scrolltop来监控到这一变化。
2、焦点事件：获得或失去焦点时触发。
3、鼠标与滚轮事件：click事件用户单击触发，dblclick双击鼠标事件，mouseout鼠标移入事件，mouseover鼠标移出事件。
鼠标按钮：按钮button的属性值，支持DOM版鼠标事件的浏览器还可以通过hasFearture()方法来检测，所以可以再喂EventUtil对象添加getButton方法。
更多的事件信息：detail属性，其中包含一个数值，表示再给订位置上发生了多少次单击，detail书香值从1开始计数，每单击发生后值就增加。altLeft，布尔值，表示是否按下了Alt键，以此类推。
滚轮事件：mousewheel事件，其对应的event对象除包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta属性。火狐支持一个名为DOMMouseScroll的类似事件。
4、键盘与文档事件：
三个键盘事件：keydown，按下键盘上的任意键触发的事件，keypress，按下键盘上的字符键时触发，keyup当用户释放键盘上的键时触发。（一般在用户通过文本框输入文本时常见）。
一个文本事件：textInput，在文本插入文本框之前触发。
键码：在发生keydown，keypress事件时，event对象的keyCode属性中会包含一个代码，与键盘上的一个特定的键对应。字符编码：charCode属性。取得字符编码后就可以使用String.fromCharCode()将其转换成实际的字符。
DOM3级变化：不再包含charCode属性。包含两个新的属性：key和char，给event对象添加了getModifierState()方法，接受一个参数，即等于shift、control等的字符串。
textInput事件：当用户在可编辑区域中输入字符时触发。他的event对象中还包含一个data属性，他的值就是用户输入的字符，event对象还有inputMethod属性，表示表示把文本输入到文本框的方式。
5、复合事件：用于处理IME的输入序列（输入法编辑器）
6、变动事件：
删除节点：
插入节点：
7、html5事件
contextmenu事件：上下文菜单，即通过单击鼠标右键可以调出上下文菜单。
beforeunload事件：在浏览器卸载页面之前触发，通过他来取消卸载并继续使用页面。为了显示弹出这个对话框，必须将event.returnValue的值设置为显示给用户的字符串，同时作为函数的值返回。
DOMContentLoaded事件：其支持在页面下载的早期添加事件处理程序。类似于window的load事件。
readystatechane事件：其目的是提供与文档或元素加载状态有关的信息，支持readystatechane事件的每个对象都有一个readyState属性，包括5个值：uninitialized（未初始化），loading（正在加载），loaded（加载完毕），interactive（交互），complete（完成）。

【内存和性能】
事件委托：对“事件处理程序过多”的问题的解决方案就是  事件委托。

【模拟事件】
模拟鼠标事件、模拟键盘事件。


十三章 事件 【总结】
在使用事件时，有必要限制一个页面中事件处理程序的数量，数量太多会导致占用大量内存，页面反应不敏捷，建立在事件冒泡机制之上的事件委托技术，可以有效的减少事件处理程序的数量；建议在浏览器卸载页面之前移除页面中所有的事件处理程序。javascript在浏览器中的模拟事件，为模拟各种有定义的事件提供了方便，通过组合使用一些技术，可以在某种程度上模拟键盘事件。