JavaScript 事件——“事件类型”中“UI事件”的注意要点

sushi 发布于2019-08-19 17:22 / 2656人阅读

摘要：事件这个事件在文档被完全卸载后触发。事件当浏览器窗口被调整到一个新的高度或宽度，就会触发该事件。事件该事件虽然在对象上发生的，但实际表示的是页面中响应元素的变化。事件关于等事件以后再讨论事件关于等事件以后再讨论事件关于等事件以后再讨论

“DOM3级事件”规定了一下几类事件

UI事件，当用户与页面上的元素交互时除法；

焦点事件，元素获得或失去焦点；

鼠标事件，通过鼠标在页面上执行操作；

滚轮事件，使用鼠标滚轮或类似设备；

文本事件，当用户在文档中输入文本；

键盘事件，通过键盘在页面上执行操作；

合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时除法；

变动事件（mutation），底层DOM结构发生变化；

~~变动名称事件，当元素或属性名变动时，此类事件已被废弃。~~

下文着重说明UI事件的内容

UI事件指的是那些不一定与用户操作有关的事件。

~~DOMActivate，元素已经被用户操作（鼠标或键盘）激活。已经被废弃。~~

load，页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。

unload，页面完全卸载（window），所有框架都卸载后（框架集），嵌入内容卸载完毕后（object）。

abort，当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。

error，当js错误时（window），当无法加载图像时（img），当无法加载嵌入内容时（object），当一或多个框架无法加载（框架集）。

select，当用户选择文本框（texterea或input）中的一个或多个字符时触发。

resize：当窗口或框架的大小变化时（window或框架）

scroll：当用户滚动带滚动条的元素中的内容时（在该元素上触发）

load事件

js中最常用的一个事件就是load，当页面完全加载完毕后（所有图像、js文件、css文件等），就会触发window上面的load事件。如：

window.onload = function () {
    console.log("loaded");
}

一般来说，在window上面发生的任何事件都可以在body元素中通过相应的特征来指定，因为在HTML中无法访问window元素。这只是为了保证向后兼容的一种权宜之计。如：

document.body.onload = function () {
    console.log("loaded");
}

同样也可以在图像元素上使用：

var img = document.getElementById("img");
img.onload = function () {
    console.log(event.target.src);
}

又如下面代码，在window加载完毕后，想body追加一个img元素，在img元素加载完毕后再提示图像的src以及一个提示信息：

window.onload = function () {
    var image = document.createElement("img");
    document.body.appendChild(image);
    image.src = "scr.png"
    image.onload = function () {
        console.log(event.target.src);
        console.log("img is loaded");
    };
}

另外，script元素也以非标准的方式支持load事件。

部分浏览器还支持link元素上的load事件，以便开发人员确定样式表是否加载完毕。

unload事件

这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生unload事件。

window.onunload = function () {
    alert("8888");
}

应该小心编写onunload事件处理程序中的代码，因为页面加载后存在的那些对象，此时就不一定存在了。

resize事件

当浏览器窗口被调整到一个新的高度或宽度，就会触发该事件。

window.onresize = function () {
    console.log(document.body.clientWidth);
}

因为部分浏览器在窗口变化了1像素就触发该事件，并随着变化不断触发；也有浏览器则只会在用户停止调整窗口大小时才会触发。所以应该避免在这个事件的处理程序中加入大量的计算代码，避免浏览器反应变慢。

scroll事件

该事件虽然在window对象上发生的，但实际表示的是页面中响应元素的变化。混杂模式下，通过body元素的scrollLeft和scrollTop来监控变化；而在非标准模式下，除Safari之外的所有浏览器都会通过html元素（documentElement）来反映这个变化：

window.onscroll = function () {
    console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

因为浏览器随着变化不断触发,所以应该避免在这个事件的处理程序中加入大量的计算代码，避免浏览器反应变慢。

abort事件

关于abort、error、select等事件以后再讨论

error事件

关于abort、error、select等事件以后再讨论

select事件

关于abort、error、select等事件以后再讨论

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78468.html

JavaScript DOM 事件初探

摘要：级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段。对象只存在于事件处理程序执行期间，一旦执行完毕，立即被销毁。焦点事件焦点事件会在页面元素获得或失去焦点时触发。 JavaScript DOM 事件初探原文链接事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间，比如单击、双击、鼠标悬浮等。事件流事件流描述的是从页面中接收事件的顺序，或者说是事件在页面中传播...

Moxmi 2019-08-20 11:14 评论0 收藏0
JavaScript 事件——“模拟事件”的注意要点

DOM中的事件模拟三个步骤：首先通过document.createEvent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串： UIEvents（DOM3中的UIEvent）鼠标和键盘事件； MouseEvents（DOM3中的MouseEvent）鼠标事件； MutationEvents（DOM3中的MutationEvent）变动事件； HTMLEvents（没有...

BakerJ 2019-08-19 17:26 评论0 收藏0
JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点

摘要：复合事件复合事件是级事件中心添加的一类事件，用于处理的输入序列。这个事件在之后触发在一个节点被直接从文档中移除，或通过子树间接从文档中移除之前触发。最后一个触发的事件是，触发于新插入节点的父节点。复合事件复合事件是DOM3级事件中心添加的一类事件，用于处理IME的输入序列。 compositionstart、compositionupdate、compositionend 复合...

Meathill 2019-08-19 17:24 评论0 收藏0
JavaScript系列之事件类型

摘要：有两种事件处理程序的方式。第一种第二种事件当调整浏览器的窗口到一个新的宽度或高度时，就会触发事件。事件在元素获得焦点时触发。这个事件冒泡某些浏览器不支持。事件在鼠标光标从元素外部首次移动到元素范围内时触发。事件这个事件跟踪鼠标滚轮。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门本文主要简单介绍以下几类事件： UI事件焦点事件鼠标与滚轮...

chanthuang 2019-08-21 17:17 评论0 收藏0
JavaScript 事件——“事件类型”中“设备事件”和“触摸与手势事件”的注意要点

摘要：对象不包含任何信息事件事件，该事件已被移除，应该使用事件但是事件仍然是实验性的事件，目前有部分浏览器暂时不支持。每个触摸事件的对象都提供了在鼠标事件中常见的属性。设备事件 orientationchange事件该事件的window.orientation属性中包含3个值：0表示肖像模式、90表示左旋转的横向模式、-90表示右旋转的横向模式。event对象不包含任何信息： wind...

Ethan815 2019-08-22 11:00 评论0 收藏0