JavaScript事件类型中UI事件详解


Posted in Javascript onJanuary 14, 2016

“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等事件请关注后续update

error事件

关于abort、error、select等事件请关注后续update

select事件

关于abort、error、select等事件请关注后续update

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
你真的了解JavaScript吗?
Feb 24 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
JavaScript事件 "事件对象"的注意要点
Jan 14 #Javascript
详解JavaScript中localStorage使用要点
Jan 13 #Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 #Javascript
jquery悬浮提示框完整实例
Jan 13 #Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 #Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 #Javascript
You might like
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
jquery对ajax的支持介绍
2013/12/10 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
vue小白入门教程
2018/04/02 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
出纳会计岗位职责
2014/03/12 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
vue自定义右键菜单之全局实现
2022/04/09 Vue.js