欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

第13章、事件

程序员文章站 2022-07-12 18:57:38
...

目录

事件流


- 事件冒泡

    即事件开始时由具体的元素（文档中嵌套层次深 的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

  • 事件捕获

    事件捕获的思想 是不太具体的节点应该更早接收到事件，而具体的节点应该后接收到事件。

  • DOM 事件流

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


事件处理程序


事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。

  • HTML事件处理程序

    某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定
不过，在 HTML 中指定事件处理程序有两个缺点。
首先，存在一个时差问题。因为用户可能会在 HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可
能尚不具备执行条件。
另一个缺点是，这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。

  • DOM0 级事件处理程序

    通过 JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
如果你使用 HTML指定事件处理程序，那么 onclick 属性的值就是一个包含着 在同名 HTML特性中指定的代码的函数。
而将相应的属性设置为 null，也可以删除 以这种方式指定的事件处理程序。

  • DOM2 级事件处理程序

    “DOM2级事件”定义了两个方法，用于指定和删除事件处理程序：addEventListener() 和 removeEventListener()。
且它们都接受 3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。 
使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。例如为同一事件定义两个不同的函数。
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；移 除时传入的参数与添加
处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法移除，所以传入的第二个参数
应该是在外部声明的一个具体函数。

    IE9、Firefox、Safari、Chrome和 Opera支持 DOM2级事件处理程序。

  • IE 事件处理程序

    IE实现了与 DOM中类似的两个方法：attachEvent()和 detachEvent()。
这两个方法接受相同 的两个参数：事件处理程序名称与事件处理程序函数。
为同一个按钮添加了两个不同的事件处理程序。不过，与 DOM 方法不同的是，这些事件处理程序不是以添加它们的顺序
执行，而是以相反的顺序被触发。


事件对象


在触发 DOM上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的 信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

  • DOM 中的事件对象
    event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方 法也不一样。不过，所有事件都会有下表列出的成员。
属性/方法 类型 说明
bubbles Boolean 表明时间是否冒泡
cancelable Boolean 表明是否可以取消事件的默认行为
currentTarget Element 其事件处理程序当前正在处理事件的那个元素
defaultPrevented Boolean 为 true 表示已经调用了preventDefault() （DOM3级事件中新增）
detail Integer 与事件相关的细节信息
eventPhase Integer 调用事件处理程序的阶段：1表示捕获阶段，2表 示“处于目标”，3表示冒泡阶段
preventDefault() Function 取消事件的默认行为。如果cancelable是 true，则可以使用这个方法 stopImmediatePropagation()
stopPropagation() Function 取消事件的进一步捕获或冒泡。如果bubbles 为true，则可以使用这个方法
target Element 事件的目标
trusted Boolean 为true表示事件是浏览器生成的。为false表 示事件是由开发人员通过JavaScript创建的 （DOM3级事件中新增）
type String 被触发的事件的类型
view AbstractView 与事件关联的抽象视图。等同于发生事件的 window对象
  • IE 中的事件对象
    与访问 DOM中的 event 对象不同，要访问 IE中的 event 对象有几种不同的方式，取决于指定事 件处理程序的方法。在使用 DOM0级方法添加事件处理程序时，event 对象作为 window 对象的一个 属性存在。
属性/方法 类型 说明
cancelBubble Boolean 默认值为false，但将其设置为true就可以取消事件冒泡（与DOM中 的stopPropagation()方法的作用相同）
returnValue Boolean 默认值为true，但将其设置为false就可以取消事件的默认行为（与 DOM中的preventDefault()方法的作用相同）
srcElement Element 事件的目标（与DOM中的target属性相同）
defaultPrevented Boolean 为 true 表示已经调用了preventDefault() （DOM3级事件中新增）
type String 被触发的事件的类型


事件类型

事件 说明
UI（User Interface，用户界面）事件 当用户与页面上的元素交互时触发
焦点事件 当元素获得或失去焦点时触发
鼠标事件 当用户通过鼠标在页面上执行操作时触发
滚轮事件 当使用鼠标滚轮（或类似设备）时触发
文本事件 当在文档中输入文本时触发
键盘事件 当用户通过键盘在页面上执行操作时触发；
合成事件 当为 IME（Input Method Editor，输入法编辑器）输入字符时触发
变动事件 当底层 DOM结构发生变化时触发

  • UI 事件

     load：当页面完全加载后在 window 上面触发，当所有框架都加载完毕时在框架集上面触发， 当图像加载完毕时在
<img>元素上面触发，或者当嵌入的内容加载完毕时在<object>元素上面 触发。 
 unload：当页面完全卸载后在 window 上面触发，当所有框架都卸载后在框架集上面触发，或 者当嵌入的内容卸载完
毕后在<object>元素上面触发。 
 abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。 
 error：当发生 JavaScript错误时在 window 上面触发，当无法加载图像时在<img>元素上面触 发，当无法加载嵌
入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框 架集上面触发。
 select：当用户选择文本框（<input>或<texterea>）中的一或多个字符时触发。 
 resize：当窗口或框架的大小变化时在 window 或框架上面触发。 
 scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加 载页面的滚动条
多数这些事件都与 window 对象或表单控件相关

    根据“DOM2级事件”规范，应该在 document 而非 window 上面触发 load 事 件。但是，所有浏览器都在 window 上面实现了该事件，以确保向后兼容。

    在不属于 DOM文档的图像（包括未添加到文档的第13章、事件元素和 Image 对象）上 触发 load 事件时，IE8及之前版本不会生成 event 对象。IE9修复了这个问题。

    根据“DOM2级事件”，应该在元素而非 window 对象上面触发 unload 事件。不过，所有浏览器都在 window 上实现了 unload 事件，以确保向后兼容。

  • 焦点事件

     blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。  
 focusin：在元素获得焦点时触发。这个事件与 HTML事件 focus 等价，但它冒泡。支持这个 事件的浏览器有 
IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。 
 focusout：在元素失去焦点时触发。这个事件是 HTML事件 blur 的通用版本。支持这个事件 的浏览器有 
IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。

  • 鼠标与滚轮事件

    9个鼠标事件，简介如下

     click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 
 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。 
 dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
 mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素
 上不会触发。IE、Firefox 9+和 Opera支持这个事件 
 mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且 在光标移动到后代元素
  上不会触发。IE、Firefox 9+和 Opera支持这个事件 
 mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。 
 mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另 一个元素可能位于前一
  个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
 mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触 发。不能通过键盘触发这
 个事件。 
 mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

    鼠标事件中还有一类滚轮事件。而说是一类事件，其实就是一个 mousewheel 事件。

    1 客户区坐标位置 
  鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。
2 页面坐标位置 
  通过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的 pageX 和 pageY 属性.
3 屏幕坐标位置
  鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通 过 screenX 和 
  screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息
4 修改键
  虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些
  修改键就是 Shift、Ctrl、Alt和 Meta（在 Windows键盘中是 Windows键，在苹果机中 是 Cmd 键），它们经常被
  用来修改鼠标事件的行为。DOM 为此规定了4各属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey 和 
  metaKey 。 这些属性都是布尔值，这些键被按下，值为 true ，否则为 false 。
5 相关元素
  在发生 mouseover 和 mouserout 事件时，还会涉及更多的元素。相关元素就是移入和移出的两个元素相对应互为相
  关元素。DOM 通过event 对象的 relatedTarget 属性提供相关元素的信息。这个属性只针对 mouseover和mouseout
6 鼠标按钮
  与 click 事件不同，mouseup 和 mousedown 事件在其 event 对象存在一个 button 属性，DOM 的 button 属性
  有3个可能的值：0 表示主鼠标按钮（左键），1 中间的鼠标按钮（滚轮），3 次鼠标按钮（右键）。
7 鼠标滚轮事件
  滚动触发 mousewheel 事件（鼠标滚轮事件），其对应的 event 对象还包含一个 wheelDelta 属性。向前滚动时，
  wheelDelta 是 120 的倍数，向后滚动时，wheelDelta 是 -120 的倍数。
8 触摸设备
  ios 和 Android 设备，因为没有鼠标，所以以下要知道：
   不支持 dbclick 事件。
   轻击可单击元素会触发 mousemove 事件，如此操作导致内容发生变化，将不再有其他事件发生；若屏幕没有因此变
  化，那么会以此触发 mousedown、mouseup 和click 事件。
   mousemove 事件会触发 mouseover 和 mouseout 事件。
   两个手指放在屏幕上且页面随手指移动而滚动时会触发 mousewheel 和 scroll 事件。

  • 键盘与文本事件

    有3个键盘事件，比较常见：
1 keydown 事件
2 keypress 事件（按住不放会重复触发，Esc键也会触发这个事件）
3 keyup 事件

    文本框输入文本时会用到上面三个事件，文本事件只有一个：textInput 。在文本插入文本框之前会触发该事件。

  • 变动事件

     DOMSubtreeModified：在 DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
 DOMNodeInserted：在一个节点作为子节点插入到另一个节点中触发。
 DOMNodeRemoved：节点从其父节点被移除时触发。
 DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发，在
  DOMNodeInserted 之后出发。
 DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发，在
  DOMNodeRemoved之后出发。
 DOMAttrModified：在特性被修改之后触发。
 DOMCharacterDataModified：在文本节点的值发生变化时触发。

    具体的变动事件：

    1 删除节点
  removeChild（）或 replaceChild（）
2 插入节点
  appendChild（）、replaceChild（）或 insertBefore（）

  • HTML5 事件

    1 contextmenu 事件
  本身属于鼠标事件，常用来显示自定义的上下文菜单。
2 beforeunload 事件
  为了让开发人员有可能在卸载之前阻止这一操作。
3 DOMContentLoaded 事件
  支持在页面下载的早期添加事件处理程序。
4 hashchange 事件
   在 URL 发生变化时通知开发人员，其 event 对象包含两个属性：oldURL 和 newURL 。


内存和性能

  • 事件委托
    对“事件处理程序过多”问题的解决方案就是事件委托。它利用了事件冒泡，至指定一个事件处理程序，就可以管理某一类型的所有事件。
  • 移除事件处理程序
    也就是把相应事件赋值为 null 。

上一篇： Ajax和XMLHttpRequest对象

下一篇： tomcat虚拟路径的配置

推荐阅读