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 相关文章推荐
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
基于Angularjs实现分页功能
May 30 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
vue项目接口域名动态获取操作
Aug 13 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_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
python中的函数用法入门教程
2014/09/02 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python 函数返回值的示例代码
2019/03/11 Python
python中eval与int的区别浅析
2019/08/11 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
面试后感谢信
2014/02/01 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python