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 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
layui table 参数设置方法
Aug 14 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
前端开发基础javaScript的六大作用
Aug 06 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读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php生成excel列序号代码实例
2013/12/24 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
js left,right,mid函数
2008/06/10 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
详解python中requirements.txt的一切
2017/03/03 Python
python用match()函数爬数据方法详解
2019/07/23 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
python实现计算图形面积
2021/02/22 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
init进程的作用
2015/08/20 面试题
大学生实习证明范本
2014/01/15 职场文书
小学国庆节活动方案
2014/02/11 职场文书
党员创先争优承诺书
2014/03/26 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
合伙经营协议书范本
2014/09/13 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
银行授权委托书格式
2014/10/10 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers