Web前端基础篇-HTML-03-事件处理系统

事件处理是前端的基础，但是又是大家掌握比较不全面的一个知识点，下面由我来给大家总结一下

tmpdir__17_9_7_15_04_07.jpg

一、事件的分类

1.1 PC端事件

1.1.1Window事件

onafterprint - 在打印文档之后运行脚本
onbeforeprint - 在文档打印之前运行脚本
onbeforeonload - 在文档加载之前运行脚本
onblur- 当窗口失去焦点时运行脚本
onerror- 当错误发生时运行脚本
onfocus- 当窗口获得焦点时运行脚本
onhaschange - 文档改变时运行脚本
onload-当文档加载时运行脚本
onmessage- 当触发消息时运行脚本
onoffline- 当文档离线时运行脚本
ononline- 当文档上线时运行脚本
onpagehide-当窗口隐藏时运行脚本
onpageshow-当窗口可见时运行脚本
onpopstate-当文档执行再执行操作（redo）时运行脚本
onresize-当调整窗口大小时运行脚本
onstorage- 当文档加载加载时运行脚本
onundo-当 Web Storage 区域更新时（存储空间中的数据发生变化时）
onunload-当用户离开文档时运行脚本

1.1.2form表单事件

onblur 当元素失去焦点时运行脚本
onchange 当元素改变时运行脚本
oncontextmenu 当触发上下文菜单时运行脚本
onfocus 当元素获得焦点时运行脚本
onformchange 当表单改变时运行脚本
onforminput 当表单获得用户输入时运行脚本
oninput 当元素获得用户输入时运行脚本
oninvalid 当元素无效时运行脚本
onreset 当表单重置时运行脚本。HTML 5 不支持
onselect 当选取元素时运行脚本
onsubmit 当提交表单时运行脚本

1.1.3keyboard事件

onkeydown 当按下按键时运行脚本
onkeypress 当按下并松开按键时运行脚本
onkeyup 当松开按键时运行脚本

1.1.4mouse事件

onclick 当单击鼠标时运行脚本
ondblclick 当双击鼠标时运行脚本
ondrag 当拖动元素时运行脚本
ondragend 当拖动操作结束时运行脚本
ondragenter 当元素被拖动至有效的拖放目标时运行脚本
ondragleave 当元素离开有效拖放目标时运行脚本
ondragover 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart 当拖动操作开始时运行脚本
ondrop 当被拖动元素正在被拖放时运行脚本
onmousedown 当按下鼠标按钮时运行脚本
onmousemove 当鼠标指针移动时运行脚本
onmouseout 当鼠标指针移出元素时运行脚本
onmouseover 当鼠标指针移至元素之上时运行脚本
onmouseup 当松开鼠标按钮时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onscroll 当滚动元素滚动元素的滚动条时运行脚本

1.1.5media事件 - 播放器常用事件

oncanplay 当媒介能够开始播放但可能因缓冲而需要停止时运行
onerror 当在元素加载期间发生错误时运行
onloadeddata 当加载媒介数据时运行脚本
onloadedmetadata 当媒介元素的持续时间以及其他媒介数据已加载时运行
onended 当媒介已抵达结尾时运行脚本
onloadstart 当浏览器开始加载媒介数据时运行脚本
onpause 当媒介数据暂停时运行脚本
onplay 当媒介数据将要开始播放时运行脚本
onplaying 当媒介数据已开始播放时运行脚本
onprogress 当浏览器正在取媒介数据时运行脚本
onratechange 当媒介数据的播放速率改变时运行脚本
onreadystatechange 当就绪状态（ready-state）改变时运行脚
onseeked 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onvolumechange 当媒介改变音量亦或当音量被设置为静音时运行脚本

1.2 移动端事件

1.2.1触摸事件（Touch）

touchstart 当手指放在屏幕上触发
touchmove 当手指在屏幕上滑动时，连续地触发
touchend 当手指从屏幕上离开时触发
touches 表示当前跟踪的触摸操作的touch对象的数组
targetTouches 特定于事件目标的touch对象的数组
changedTouches 上次触摸以来发生了什么改变的touch对象的数组

1.2.2 手势事件

gesturestart 当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发
gesturechange 当触摸屏幕的任何一个手指的位置发生改变的时候触发
gestureend 当任何一个手指从屏幕上面移开时触发

二、事件处理流程

事件处理流程分为三个阶段：
1、事件捕获阶段

当用户触发点击事件后，顶层对象 document 就会发出一个事件流，从最外层的 DOM 节点向目标元素节点传递，最终到达目标元素

2、事件处理阶段

当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理

3、事件冒泡阶段

事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行

注意：一般建议在冒泡阶段处理事件，这样可以最大限度的兼容各种浏览器。
$\color{red}{特别提醒：blur、focus、load、unload 等几个事件不会冒泡, 可以通过bubbles属性判断是否可以冒泡}$

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
      <title>事件处理</title>
</head>
<body>
 <div id="father">
      <div id="child">
           按钮点击事件:
         <button onclick="onClickCurrentEvent()">click事件</button>
     </div>
 </div>
  <div id="custom">自定义事件</div>
</body>
</html>

事件传递图解

事件处理系统.png

红色线表示第一个阶段捕获，<button>表示目标元素响应，蓝色表示第三阶段冒泡

三、事件监听处理方法

3.1addEventListener
事件目标可以是一个文档上的元素 Element/Document和Window
或者任何其他支持事件的对象;
代码格式
target.addEventListener(type,listenner,options)

该方法将指定的监听器注册到 EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行.

参数	说明
type	事件类型
listener	函数（事件对象）
listener. bubbles	只读,一个布尔值，表示该事件是否能够在DOM中冒泡。）
listener. cancelBubble	通过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件冒泡
listener. cancelable	只读。一个布尔值，用来表示这个事件是否可以取消。
listener. currentTarget	只读。注册事件监听的对象。
listener. target	只读。对事件起源目标的引用。
listener. preventDefault	取消默认事件
listener. stopPropagation	阻止事件冒泡
options	可选参数
$\color{red}{options. apture}$	如果为true，表示该listener会在捕获过程中执行。如果为false，listener会在冒泡过程中执行。默认为false
$\color{red}{options. once}$	默认为false。如果为true，listener只会执行一次，并且执行后会被自动移除
options. passive	如果为true，则无法调用preventDefault来阻止默认事件。默认为false。这个属性有一个需要注意的地方。在safari浏览器的页面滚动事件中，这个值是默认的true。所以要阻止safari中的页面滚动，需要手动将这个值设为false。

3.1 removeEventListener - 删除使用addEventListener注册到target上的事件

注意：一般情况target.addEventListener 与removeEventListener 成对出现，否则可能有内存风险
代码格式
target. removeEventListener(type,listenner,options)

四、事件代理

本意要监听子元素的事件，但是可以直接监听父元素的事件来判断子元素的处理，这里父元素就是代理委托对象

五、自定义事件

5.1 方式一（不推荐）

// 1. 创建一个自定义事件
const event = document.createEvent('Event');

// 2. 创建自定义事件类型
const eventType = "test";

//3. 初始化事件 initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
event.initEvent(eventType, false, false);

// 4.为这个元素派发事件
const node = document.getElementById('custom');
node.dispatchEvent(event);

5.2 方式二（小编推荐）

 const node = document.getElementById('custom');
    const event =  new Event('test', {bubbles: false, cancelable: false});
    node.dispatchEvent(event);

事件使用：

    //获取元素
    const node = document.getElementById('custom');

    // 监听事件
    node.addEventListener('test', function (e) {
        console.log('监听自定义事件----',e);
    }, false);

H5系列
Web前端基础篇-HTML-01-BOM浏览器对象模型
 Web前端基础篇-HTML-02-HTML的生命周期
 Web前端基础篇-HTML-03-事件处理系统
 Web前端基础篇-HTML-04-HTML 渲染流程
 Web前端基础篇-HTML5-05-最全本地存储总结
 Web前端基础篇-HTML5-06-离线缓存AppCache
Web前端基础篇-HTML5-07-浏览器缓存机制