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中字符替换函数String.replace()使用技巧
Aug 14 Javascript
修复ie8&chrome下window的resize事件多次执行
Oct 20 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
Vue监视数据的原理详解
Feb 24 Vue.js
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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
运动会广播稿50字
2014/01/26 职场文书
医院检讨书范文
2014/02/01 职场文书
个人承诺书怎么写
2014/05/24 职场文书
企业务虚会发言材料
2014/10/20 职场文书
董事长岗位职责
2015/02/13 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL