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 无提示关闭窗口脚本
Aug 17 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
JavaScript流程控制(分支)
Dec 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计算页面执行时间的实现代码
2013/06/18 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
JavaScript File分段上传
2016/03/10 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python mysqldb连接数据库
2009/03/16 Python
python正则表达式抓取成语网站
2013/11/20 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
如何基于Python创建目录文件夹
2019/12/31 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
酒店总经理岗位职责范本
2014/08/08 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
跑出一片天观后感
2015/06/08 职场文书
郭明义电影观后感
2015/06/08 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL