JavaScript 事件

前言：

　　1、客户端 JavaScript 程序采用了异步事件驱动编程模型

　　2、事件不是 JavaScript 对象，不会出现在程序源代码中

　　3、事件类型是一个用来说明发生什么类型事件的字符串，有时会称之为事件名字

　　4、事件目标是发生的事件或与之相关的对象，当讲事件时，我们必须同时指明事件类型和事件目标

　　5、事件处理程序或事件监听程序是处理或响应事件的函数

　　6、事件对象是与特定事件相关且包含有关该事件详细信息的对象；事件对象作为参数传递给事件处理程序函数（不包括 IE8 及之前版本）；

　　　  所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性（IE8 及之前版本采用 srcElement 而非 target）；

　　　  每个事件类型都为其相关事件对象定义一组属性

　　7、事件传播是浏览器决定哪个对象触发其事件处理程序的过程，对于单个对象的特定事件（如 Window 对象的 load 事件），必须是不能传播的

　　8、当文档元素上发生某个类型的事件时，它们会在文档树上向上传播或“冒泡”

　　9、事件传播的另一种形式称为事件捕获，在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前拦截（或“捕获”）它，

　　　  IE8 及之前版本并不支持事件捕获

　　10、事件处理程序可以通过返回一个适当的值、调用事件对象的某个方法或设置事件对象的某个属性来阻止默认操作的发生

注：冒泡和捕获定义了事件触发的顺序；冒泡是从内部事件对象本身开始触发事件，然后依次向其祖先元素冒泡触发事件，

　　而捕获则是在其祖先元素先触发，然后再往其自身方向依次触发事件

 

事件类型：

　　1、传统事件类型：

　　　　① 表单事件：

　　　　　　a、当提交表单和重置表单时，<form> 元素会分别触发 submit 和 reset 事件

　　　　　　b、当用户和类按钮表单元素（包括单选按钮和复选框）交互时，它们会发生 click 事件

　　　　　　c、当用户通过输入文字、选择选项或选择复选框来改变相应表单元素的状态时，这些通常维护某种状态的表单元素会触发 change 事件；

　　　　　　     对于文本输入域，只有用户和表单元素完成交互并通过 Tab 键或单击的方式移动焦点到其他元素上时才会触发 change 事件

　　　　　　d、无论用户何时输入文字（通过键盘或剪切和粘贴）到 <textarea> 和其他文本输入表单元素，除 IE 外的浏览器都会触发 input 事件

　　　　　　e、响应通过键盘改变焦点的表单元素在得到和失去焦点时会分别触发 focus 和 blur 事件，这两个事件

　　　　　　　  不会冒泡（focusin 和 focusout 可以代替它们，且可以冒泡），但其他所有表单事件都可以

　　　　

　　　　② Window 事件：指事件的发生与浏览器窗口本身而非窗口中显示的任何特定文档内容相关

　　　　　　a、当文档和其他所有外部资源完全加载并显示给用户时会触发 load 事件

　　　　　　b、当用户离开当前文档转向其他文档时会触发 unload 事件

　　　　　　c、beforeunload 事件和 unload 类似，但它能提供询问用户是否确定离开当前页面的机会

　　　　　　   （该事件的处理程序如果返回字符串，则会在新页面加载之前展示给用户看，这样用户就有机会取消跳转）

　　　　　　d、当图片（或其他网络资源）因为用户停止加载进程而导致失败就会触发 abort 事件（部分浏览器支持）

　　　　　　e、当浏览器窗口从操作系统中得到或失去键盘焦点时会触发 focus 和 blur 事件

　　　　　　f、当用户调整浏览器窗口大小或滚动它时会触发 resize 和 scroll 事件（scroll 事件也能在任何可以滚动的文档元素上触发）

　　　　　　注：Window 对象的 onerror 属性有点像事件处理程序，当 JavaScript 出错时会触发它，但它并不是真正的事件处理程序，

　　　　　　　　因为它不能用不同的参数来调用

 

　　　　③ 鼠标事件：当用户在文档上移动或单击鼠标时都会产生鼠标事件，该类事件会“冒泡”

　　　　　　a、用户每次移动或拖动鼠标时，会触发 mousemove 事件

　　　　　　b、当用户按下或释放鼠标按键时，会触发 mousedown 和 mouseup 事件

　　　　　　c、在 mousedown 和 mouseup 事件队列之后，浏览器也会触发 click 事件

　　　　　　d、当用户在相当短的时间内连续两次单击鼠标按键，跟在第二个 click 事件之后就是 dblclick 事件

　　　　　　e、在显示菜单之前，通常会触发 contextmenu 事件，而取消这个事件就可以阻止菜单显示

　　　　　　f、当用户移动鼠标指针从而悬停在新元素上或不再悬停在某个元素上时，会触发 mouseover 和 mouseout 事件（会“冒泡”）

　　　　　　g、IE 提供了不会冒泡版本的 mouseenter 和 mouseleave，JQuery 模拟非 IE 的浏览器中这些事件的支持

　　　　　　h、当用户滚动鼠标滚轮时，浏览会触发 mousewheel 事件（在 Firefox 中是 DOMMouseScroll 事件）

 

　　　　④ 键盘事件：当键盘聚焦到 Web 浏览器时，用户每次按下或释放键盘上的按键时都会产生事件

　　　　　　a、无论何时按下或释放按键（甚至是辅助键）都会触发 keydown 和 keyup 事件

　　　　　　b、当 keydown 事件产生可打印字符时，在 keydown 和 keyup 之间会触发另一个 keypress 事件

　　　　　　注：若按下键重复产生字符时，在 keyup 事件之前可能产生很多 keypress 事件

　　2、DOM 事件：

　　　　① DOM 即文档对象模型，它是一种与编程语言及平台无关的 API ，借助于它，程序能够动态地访问和修改文档内容、结构或显示样式

　　　　② W3C 协会早在 1988 年就开始了 DOM 标准的制定，W3C DOM标准可以分为 DOM1, DOM2, DOM3 三个版本

　　　　③ DOM1 主要定义的是 HTML 和 XML 文档的底层结构，

　　　　　 DOM2 和DOM3 则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性

注：API 是应用程序接口，它以编程语言提供的结构，允许开发人员更容易地创建复杂的功能。

　  它们抽象出更复杂的代码，并提供一些简单的语法来使用。简而言之，API就是一种为你客户提供服务的方法

 

　　3、HTML5 事件：

　　　　① HTML5 及相关标准定义了大量新的 Web 应用 API，其中许多 API 都定义了事件，

　　　　　 如：getElementsByClassName() 方法和 querySelectorAll() 方法以及文档元素的 dataset 属性

　　　　② 广泛推广的 HTML5 特性之一是加入用于播放音频和视频的 <audio> 和 <video> 元素

　　　　③ HTML5 的拖放 API 允许 JavaScript 应用参加基于操作系统的拖放操作，实现 Web 和原生应用间的数据传输

　　　　④ HTML5 为 HTML 表单定义了大量的新特性，也定义了表单验证机制

　　　　⑤ HTML5 定义了历史管理机制，它允许 Web 应用同浏览器的返回和前进按钮交互 

　　　　⑥ HTML5 包含了对离线 Web 应用的支持

　　　　⑦ HTML5 及相关标准定义了一些不在窗口、文档和文档元素的对象上触发的事件

　　　　⑧ HTML5 及相关标准定义了少量庞杂的事件类型

 

　　4、触摸屏和移动设备事件

　　　　① 强大的移动设备的广泛应用需要建立新的事件类型

　　　　② 手势事件：用于两个手指之间的缩放与旋转；手势开始时产生 gesturestart 事件，手势结束产生 gestureend 事件，

　　　　　 在这两个事件之间是跟踪手势过程的 gesturechange 事件队列；这三个事件对象都有属性 scale（缩放比例）和 rotation（旋转角度）

　　　　　 “捏紧”手势的 scale 值小于 1.0，“撑开”手势的 scale 值大于 1.0；rotation 指从事件开始手指旋转的角度，正值表示顺时针旋转

　　　　③ 触摸事件：当手指触摸屏幕时，会触发 touchstart 事件，移动时会触发 touchmove 事件，手指离开时会触发 touchend 事件

　　　　　 不像鼠标事件，触摸事件并不直接报告触摸的坐标。相反，触摸事件传递的事件对象有一个 changedTouches 属性，

　　　　　 该属性是一个类数组对象，其每个元素都描述触摸的位置

　　　　④ 横竖屏切换事件：当设备允许用户从竖屏旋转到横屏模式时会在 window 对象上触发 orientationchange 事件，

　　　　　 window 对象的 orientatation 属性能给出当前方位，其值是 0，90，180 或 -90

原文链接:https://www.cnblogs.com/lemonyam/p/10700856.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有