#JavaScript学习#第十三章：事件

Avery_66
154 阅读8分钟

Tips: 内容为知识梳理(由于时间原因，这一章只梳理重要知识点)

目录

  1. 事件流

  2. 事件处理程序

  3. 事件对象

  4. 事件类型

  5. 内存和性能

  6. 模拟事件

1. 事件流

事件流指的是页面接受事件的顺序，其中有两个完全相反的概念，如下

1.1 事件冒泡流

事件冒泡指的是由嵌套在最里面的那个元素逐级往上传播，比如你点击了一个div元素，那么事件先发生在div上，再到body，再到html

1.2 事件捕获流

与事件冒泡相反

1.3 DOM事件流

“DOM2级事件”规定事件流包括三个阶段

  1. 事件捕获：先定位元素位置，不过事件捕获会停止于具体元素的上一级元素
  2. 处于目标阶段：实际元素接受到事件
  3. 事件冒泡：与前面讲的一样

2. 事件处理程序

相应某个事件的函数就是事件处理程序，函数名以on开头，如click 事件就是onclick

2.1 HTML事件处理程序

被摒弃了。。。

<input type="button" value="Click Me" onclick="alert(this.value)">

this就是指这个元素对象，也可以省略 但某些函数可能是在页面底部定义的，在onclick调用就会出错

2.2 DOM0级事件处理程序

每个元素都有自己的事件处理程序

var btn =document.getElementById("myBtn");
btn.onclick = function(){
	alert("Clicked")
}

2.3 DOM2级事件处理程序

所有DOM节点都包含这两个方法： 处理指定事件：

btn.addEventListener("click",function(){
},false);

三个参数：事件名，函数，布尔值，若为false即表示在冒泡阶段处理，true在捕获阶段 移除上述添加的事件：

btn.removeEventListener()

三个参数必须与add的完全一致才能移除，若在add中定义匿名函数则永远不能被移除

2.4 IE事件处理程序

两个方法：

btn.attachEvent()

两个参数：事件名称(onclick而不是click)和函数，直接添加到冒泡阶段

btn.detachEvent()

相同参数 attachEvent作用域是全局，this指向window

2.5 跨浏览器事件处理程序

EventUtil.addHandler()
EventUtil.removeHandler()

接受三个参数：要操作的元素，事件名，函数 它会视情况选择使用DOM0级、2级、IE方法处理事件

3. 事件对象

当触发一个事件，就会产生一个事件对象event

3.1 DOM中的事件对象

event对象会被传入事件处理程序中，这个对象有一些属性和方法这里不一一介绍，其中有个type属性，字符串类型，表示的是被触发事件的类型。

  • 用event.preventDefault()方法组织默认发生事件，如当单击链接时会跳转至另一url，用这个方法取消之
  • 用event.stopPropagation()阻止事件传播
  • eventPhase属性确定当前属于哪个阶段，1为捕获，2为处于目标，3为冒泡

3.2 IE的事件对象

访问IE中的event对象有几种不同方式 DOM0级：event是window的一个属性，它也有一些不同的属性和方法，这里不介绍

3.3 跨浏览器事件对象

修改前面EventUtil对象即可。新增getEvent方法，返回对event对象的引用，getTarget方法，返回事件目标，preventDefault，取消默认行为，stoppropagation，阻止事件流

4.事件类型

4.1 UI事件

  1. load事件：页面完全加载完触发，也可以在body和img元素上添加onload特性，来表示这个元素加载完
  2. unload事件：文档被完全卸载即从一个页面切换到另一个页面发生这个事件
  3. resize事件：当窗口被调整到新的高度或宽度触发
  4. scroll事件：在文档被滚动期间重复触发

4.2 焦点事件

  1. blur：在元素失去焦点时触发，不冒泡，所有浏览器支持
  2. focusin：获得焦点时触发，冒泡，部分浏览器支持
  3. focus：获得焦点，冒泡，全支持
  4. focusout：失去焦点，部分浏览器支持

4.3 鼠标与滚轮事件

  1. click：单击
  2. dbclick：双击
  3. mousedown：按下鼠标任意按钮
  4. mouseenter：鼠标进入元素范围内
  5. mouseleave：移动到元素范围外
  6. mousemove：元素内部移动
  7. mouseout：光标位于元素上方，然后移入另一个元素
  8. mouseover：位于元素外部，用户将其移入另一元素边界内触发
  9. mouseup：用户释放鼠标

4.4 键盘与文本事件

  1. keydown：按下任意键触发
  2. keypress：按下任意字符键
  3. keyup：释放键盘键
  4. textInput：在可编辑区域输入字符 部分event属性
  5. keyCode：与键盘按下键对应，如Tab的keyCode时9，表格暂不列出
  6. charCode：按下键的ASCII编码
  7. key：若是字符键，对应文本字符。若不是，相应键名，如Shift

4.5 复合事件

针对同时按住多个键最终输入一个字符来设计

  1. compositionstart：开始输入时触发
  2. ~update：向输入字符中出入新字符触发
  3. ~end：文本复合系统关闭时触发

4.6 变动事件

  1. DOMSubtreeModified：DOM结构发生变化
  2. DOMNodeInserted：在一个节点作为子节点被插入另一节点时触发
  3. DOMNodeRemove：节点从其父节点被移除
  4. DOMNodeInsertIntoDocument：一个节点直接或间接插入文档
  5. DOMNodeRemoveFromDocument：节点直接或间接被移除
  6. DOMAttrModified：特性被修改
  7. DOMCharacterDataModified：文本节点的值发生变化

用removeChild或replaceChild删除节点 用appendChild或replaceChild或insertBefore插入节点

4.7 HTML5事件

  1. contextment：右键单击出现默认上下文菜单，用preventDefault来阻止默认菜单出现然后使用自定义的菜单
  2. beforeunload：在页面卸载前发生，询问用户是否留下，须把event.returnValue属性设置为要显示给用户的信息
  3. DOMContentLoaded：在形成完整DOM树后触发，可以为document添加事件处理程序
  4. readystatechange：提供元素加载状态，其对象有一个readyState属性，有以下五个值：uninitialized：未初始化、loading：加载中、loaded：加载完、interactive：可以操作对象、complete：对象已完全加载
  5. pageshow和pagehide事件：show在重新加载页面中，在load事件后触发，在bfcache中，在页面完全恢复时触发，这个事件处理程序须添加到window；hide事件在页面卸载时触发，在unload之前。
  6. hashchange：在url变化时触发，添加到window对象，event对象有两个额外属性：oldURL和newURL

4.8 设备事件

  1. orientationchange：当设备(ios)横过来时触发
  2. MozOrientation：也是检测设备(非ios)方向，x、y、z
  3. deviceorientation：告诉设备空间中朝向哪，event.alpha、beta、gamma
  4. devicemotion：告诉什么时候移动

4.9 触摸与手势事件

  1. touchstart：触摸时触发
  2. touchmove：滑动时触发
  3. touchend：离开时触发
  4. touchcancel：系统停止跟踪移动时触发
  5. gesturestart：一个手指已经按在屏幕上，另一个手指又触摸屏幕
  6. gesturechange：任意一个手指位置变化
  7. gestureend：任意一个手指移开屏幕

5. 内存和性能

尽量减少添加到页面的事件处理程序

5.1 事件委托

即把事件直接弄到一个比较高的节点上，统一管理某一类型的所有事件，而不是每个小事件都添加事件处理程序，用target=EventUtil.getTarget(event)获取事件目标，然后用target.id获取具体的哪一个节点执行什么事件

5.2 移除事件处理程序

在onunload事件处理程序中移除所有已添加的事件处理程序，设置其为null即可，如btn.onclick=null

6. 模拟事件

在测试web应用程序时，模拟触发技术及其有用

6.1 DOM事件模拟

在document对象用creatEvent方法创建event对象，接受一个参数，表示是什么类型的事件，有以下几个可接受参数：

  • UIEvents：UI事件
  • MouseEvents：鼠标事件
  • MutationEvents：DOM变动事件
  • HTMLEvents：HTML事件
  1. 模拟鼠标事件 创建鼠标事件须指定必要信息 返回的对象有initMouseEvent()方法，接受15个参数： type：事件类型 bubbles：事件是否冒泡 cancelable：是否可以取消 view：与事件关联的视图 detail：0 screenX：相对于屏幕X坐标 Y：Y坐标 clientX：相对于视口X Y ctrlKey：是否按下Ctrl，默认false altKey：false shift：false metaKey：是否按下Meta，默认false button：表示按下哪一个鼠标键，默认为0 relatedTarget：表示与事件相关对象 用这个初始化后的对象传给dispatchEvent方法，就会自动触发
  2. 模拟键盘事件 createEvent("KeyboardEvent")创建键盘事件，返回对象包含initKeyEvent()方法，接受10个参数 type：事件类型 bubbles：是否冒泡 cancelable：是否可以取消 view：与事件关联视图 ctrlKey：是否按下ctrl altKey：按下alt shiftKey：按下shift metaKey：按下meta keyCode：键码 charCode：ascii编码 将初始化后对象传入dispatchEvent即可
  3. 模拟其他事件 也是用creatEvent方法，传入事件类型名即可
  4. 自定义DOM事件 类型名为CustomEvent，返回对象有initCustomEvent方法，四个参数 type：事件类型 bubbles：同上 cancelable：同上 detail：任意值，保存在event对象的detail属性中

6.2 IE的模拟事件

调用document.creatEventObject()方法创建event对象，不接受参数，要手动添加必要信息，最后调用fireEvent方法，会自动为event对象添加srcElement和type属性

avatar
文章
阅读
粉丝