UI Events 用户界面事件


Posted in Javascript onJune 27, 2012

UI Events并不是直接与用户行为相关,UI Event 包括如下:

DomActivate:当元素被用户的某些行为激活时,触发该事件,例如用户的鼠标或者键盘事件。这一事件在DOM3级事件中被废弃了,FF2+和chrome支持,犹豫跨浏览器实现机制的不同,不推荐使用这个事件。

load:在window对象上触发是当页面加载完毕之后触发的,在frameset 是当所有的frames都加载完毕之后触发,当指img标签时,是指图片加载完毕之后等等。

unload:在window对象上触发是当页面卸载完毕之后触发的,在frameset 是当所有的frames都卸载完毕之后触发,当指img标签时,是指图片卸载完毕之后等等。

abort:当一个元素没有完全加载完,在用户停止了下载操作之前,而触发。

error:当window的javascript发生错误时触发,当img不能加载是触发,或者object元素不能被加载时触发,当frameset中的一个或多个frame不能被加载时触发,

select:当用户选择textbox中一个或多个字符时触发该事件。

resize:当window或者frame被改变大小的时候触发。

scroll:当用户滚动一个带滚动条的元素时触发。

绝大多数的HTML事件,要么与window对象相关,要么与form控件相关。

判断一个浏览器是否在DOM2级事件上支持HTML事件,可以采用下面的代码:

var isSupport = document.implementation.hasFeature('HTMLEvents','2.0');

若果在dom2级事件上实现的话,将会返回true,否则返回false

var isSupported = document.implementation.hasFeature(“UIEvent”, “3.0”);

在dom3级上同理。

The load Event

load事件可能是javascript中最常用到的。对window对象而言,当网页被完全加载完毕时,触发load事件。总而言之,任何发生在window上的事件可以通过body元素的属性进行访问,因为在HTML中是没有权限访问window元素。

对于img标签当你制定img标签的src属性时,同样可以触发他的load事件。

如下:

EventUtil.addHandler(window, “load”, function(){ 
var image = new Image(); 
EventUtil.addHandler(image, “load”, function(event){ 
alert(“Image loaded!”); 
}); 
image.src = “smile.gif”; 
});

同样也有其他的元素以一种非标准的方式支持load event,如script标签元素,当在 IE9+、FF、Opera、Chrome、Safari3.0+中动态加script并且加载完成时将触发script的load事件,与img元素不同,js文件开始加载是在src属性被赋值之后,而且这个元素已经被加入到document之中。因此Event handler的顺序与src赋值无关。

例子如下:

EventUtil.addHandler(window, “load”, function(){ 
var script = document.createElement(“script”); 
script.type = “text/javascript”; 
EventUtil.addHandler(script, “load”, function(event){ 
alert(“Loaded”); 
}); 
script.src = “example.js”; 
document.body.appendChild(script); 
});

 IE和Opera同样支持link标签的load事件。

The unload Event

与load事件相对的就是 unload事件,这个事件当document完全被卸载的时候触发。典型的例子就是,浏览器从一个一面导航到另一个页面的时候会触发该事件,并且通常是用这个事件来释放内存,避免没有必要的内存占用。与load事件相似,unload事件可以通过两种方式进行创建即通过js和通过HTML属性来创建。

对于unload事件的处理函数要格外的小心,因为自从卸载事件被激发,并不是所有的对象都是可用的,当页面被加载仍然可用。试图操作Dom节点的位置或者改变外观会出现错误。

The resize Event

当浏览器窗口的长度和高度被改变时会触发 resize 事件,这个事件发生在window对象上,注册方式与前两个事件的注册方式相同。

与其他发生在window对象上的事件相同,在dom浏览器中该事件的target指的是document,而IE8 和 更早版本的浏览器中是没有相关属性可以使用的。

在不同的浏览器中resize事件存在这很多不同,在IE safari chrome opera中只要修改一个像素的值,该事件就会被触发。而在FF中只有当重置大小操作停止时才会触发这个事件。并且浏览器的最大 最小化同样会触发此事件。

The scroll Event

虽然scroll事件发生在window对象上,但他也同样适用于页面级元素。在混在模式下,对应的变化反映在<body>元素的scrollLeft和scrollTop属性;在标准模式下,对应的变化发生在<HTML>元素上,除了safari,其他的浏览器都遵守上述的规则,例如:

EventUtil.addHandler(window, “scroll”, function(event){ 
if (document.compatMode == “CSS1Compat”){//标准模式反映在html上。 
alert(document.documentElement.scrollTop); 
} else { 
alert(document.body.scrollTop); 
} 
});
Javascript 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
浅谈Javascript鼠标和滚轮事件
Jun 27 #Javascript
浅谈Javascript事件模拟
Jun 27 #Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 #Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 #Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 #Javascript
Jvascript学习实践案例(开发常用)
Jun 25 #Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 #Javascript
You might like
php上传、管理照片示例
2006/10/09 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
财务总监管理职责范文
2014/03/09 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
工作表扬信
2015/01/17 职场文书
介绍信范文大全
2015/05/07 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python