技术专栏-js事件 js事件概念

bigegpt 2024-10-12 06:29 4 浏览

内容导读

不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错过HTML指定事件处理程序的最后一个缺点是HTML与JavaScript代码紧密耦合。5、IE事件处理程序 IE8及一下版本实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。abort ：在用户停止下载过程时，如果嵌入的内容没有加载完，则在元素上面触发。select ：当用户选择文本框（或）中的一或多个字符时触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件。

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型

一、事件流

IE的事件流是事件冒泡流，而NetscapeCommunicator的事件流是事件捕获流。

1、事件冒泡

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

2、事件捕获

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

3、DOM事件溜

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

IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。

二、事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头

1、HTML事件处理程序

直接在html中绑定事件。例如：

<input type="button" value="Click Me" onclick="alert('Clicked')" />

缺点：

在HTML中指定事件处理程序有两个缺点。首先，存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错
过HTML指定事件处理程序的最后一个缺点是HTML与JavaScript代码紧密耦合。

2、DOM0级事件处理程序

是将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById("myBtn");
btn.onclick = function(){alert("Clicked");};
// 程序中的this引用当前元素。
//删除事件处理程序
btn.onclick = null;

3、DOM2级时间处理程序

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：

要处理的事件名、

作为事件处理程序的函数

一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){alert(this.id);}, false);

btn.addEventListener("click", function(){alert("Hello world!"); }, false);

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

4、DOM3级事件(规定了几类事件)

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

5、IE事件处理程序

IE8及一下版本实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

三、事件对象

在触发DOM上的某个事件时，会产生一个事件对象event

e.preventDefault()
e.stopPropagation()

[图片上传失败...(image-2de301-1525359500979)]
[图片上传失败...(image-397a8b-1525359500979)]

四、事件类型

1、UI 事件

load: 当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上面触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。
unload：当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在<object>元素上面触发。
abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。
error：当发生JavaScript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发。第17章将继续讨论这个事件。
select：当用户选择文本框（<input>或<tex-terea>）中的一或多个字符时触发。第14章将继续讨论这个事件。
resize：当窗口或框架的大小变化时在window或框架上面触发。
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。

2、焦点事件

blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。

3、鼠标与滚轮事件

DOM3级事件中定义了9个鼠标事件：

click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以DOM3级事件将其纳入了标准。
mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox9+和Opera支持这个事件。
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox9+和Opera支持这个事件。
mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

键盘与文本事件

keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件。Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件。
keyup：当用户释放键盘上的键时触发。

变动事件

DOM2级的变动（mutation）事件能在DOM中的某一部分发生变化时给出提示。

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

五、HTML5事件

contextmenu事件

beforeunload事件

之所以有发生在window对象上的beforeunload事件，是为了让开发人员有可能在页面卸载前阻止这一操作。

DOMContentLoaded事件

如前所述，window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而颇费周折。而DOMCon-tentLoaded事件则在形成完整的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。

readystatechange事件

提供与文档或元素的加载状态有关的信息

pageshow和pagehide事件

第一个事件就是pageshow，这个事件在页面显示时触发，无论该页面是否来自bfcache。在重新加载的页面中，pageshow会在load事件触发后触发；而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。另外要注意的是，虽然这个事件的目标是document，但必须将其事件处理程序添加到window。

hashchange事件

移动设备

触摸与手势事件

touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用prevent-Default()可以阻止滚动。
touchend：当手指从屏幕上移开时触发。
touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

手势事件

gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。

gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。

gestureend：当任何一个手指从屏幕上面移开时触发。

参考文献： javascript 高级编程

touchstart

上一篇：web前端面试题-移动开发篇(持续更新...)
下一篇：前端基础进阶(十一):详解面向对象、构造函数、原型与原型链