事件类型-UI事件、焦点事件
DOM3级事件包括以下几类事件:
- UI事件:当用户与页面上的元素交互时触发
- 焦点事件:当元素获得或失去焦点时触发
- 鼠标事件:当用户通过鼠标在页面上执行操作时触发
- 滚轮事件:当使用鼠标滚轮时触发
- 文本事件:当在文档中输入文本时触发
- 键盘事件:当用户通过键盘在页面上执行操作时触发
- 合成事件:当为IME(输入法编辑器)输入字符时触发
- 变动事件:当底层DOM结构发生变化时触发
UI事件
包括以下事件:
1.load事件
- 当页面完全加载后(包括所有图像、js文件、css文件等外部资源)在window上面触发;
- 当所有框架都加载完毕时在框架集上面触发;
- 当图像加载完毕时在<img>元素上面触发;
- 当嵌入内容加载完毕时在<object>元素上触发。
两种定义onload事件处理程序的方式:
(1) js代码
(2) 为<body>元素添加一个onload属性
/*第一种方式*/
EventUtil.addHandler(window,"load",function(event){
//进行相应的操作
})
/*第二种方式*/
<body onload="相应操作"></body>
1.1 图像上触发load事件
/*方式1*/
<img src="smile.gif" onload="alert('Image Loaded')">
/*方式2*/
var image = document.getElementById("myImage");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
在创建新的<img>元素时,可以为其指定一个事件处理程序,以便图像加载完之后给出提示,但是重要的是在指定src属性之前先指定事件,如下:
/*为window指定事件,确保在document.body不会出错,页面已经完全加载*/
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
//指定src之前先指定事件
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
注意:新图像元素不一定要从添加到文档后才开始下载,只要设置了src属性就会开始下载。
1.2 <script>元素、<link>元素触发load事件
确定动态加载的js问价时候加载完毕,注意:与图像不同,只有设置了src属性并将新元素添加到文档后,才开始下载,所以对<script>元素来说,指定src属性和指定事件处理程序的先后顺序是不重要的。
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
})
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
2. unload事件
与load事件对应,在文档被完全卸载后触发,只要用户从一个页面切换到另一个页面,就会发生unload事件。该事件用的最多的就是清除引用,以避免内存泄漏。
/*第一种方式*/
EventUtil.addHandler(window,"unload",function(event){
//进行相应的操作
})
/*第二种方式*/
<body onunload="相应操作"></body>
unload事件是在一切都被卸载之后才触发的,那么在页面加载后存在的那些对象此时就不一定存在了,所以此时再操作DOM节点或元素的样式就会导致错误。
3.resize事件
当浏览器窗口被调整到一个新的高度或者宽度时,就会触发resize事件,该事件在window(窗口)上面触发,因此可以通过JavaScript或者<body>元素中的onresize特性来指定事件处理程序,推荐的JavaScript方式如下:
EventUtil.addHandler(window,"resize",function(event){});
//传入的event对象有一个target属性,值为document
关于何时触发resize事件不同浏览器有不同的机制,所以不要在这个事件的处理程序中加入大量的代码。
4.scroll事件
该事件是在window对象上发生的,但它实际表示的是页面中相应元素的变化:
- 混杂模式下:通过<body>元素的scrollLeft和scrollTop来监控到这一变化。
- 标准模式下:通过<html>元素来反映这一变化(除了Safari,Safari仍然基于<body>跟踪滚动位置)
EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat"){ //标准模式下
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
与resize事件类似,scroll事件会在文档被滚动期间重复被触发,所以尽量保持事件处理程序代码简单。
焦点事件
焦点事件会在页面元素获得或失去焦点时触发,利用这些时间并与document.hasFocus()方法及document.activeElement属性配合,可以知晓用户在页面上的行踪。有6个焦点事件:
- blur:在元素失去焦点时触发,该事件不会冒泡,所有浏览器都支持。
- focus:在元素获得焦点时触发,该事件不会冒泡,所有浏览器都支持。
- focusin:与focus事件等价,但是它冒泡。
- focusout:是HTML事件blur的通用版本。
事件类型-UI事件、焦点事件的更多相关文章
- Javascript高级编程学习笔记(62)—— 事件(6)焦点事件
焦点事件 焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用 以及 document.activeElement 属性配合可以知晓用户在页 ...
- DOM事件类型详解
一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...
- 《JAVASCRIPT高级程序设计》事件处理程序和事件类型
一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡, ...
- 浅谈JavaScript的事件(事件类型)
Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息.DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发:焦点事件,元素获得或失去焦点触发:鼠标事件,用户通过鼠标在 ...
- javascript 的 事件类型(事件)
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
- AS3事件类型
Event事件类型: ACTIVATE 激活事件 DEACTIVATE 对象休眠事件 ADDED 可视对象添加事件 ADDED_TO_STAGE 可视对象添加到舞台事件 REMO ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- 在 SharePoint Server 2013 中配置建议和使用率事件类型
http://technet.microsoft.com/zh-cn/library/jj715889.aspx 适用于: SharePoint Server 2013 利用使用事件,您可以跟踪用户与 ...
随机推荐
- Django - 后台admin不显示带auto_now, auto_now_add选项的字段
https://stackoverflow.com/questions/6386172/datetimefield-doesnt-show-in-admin-system 解决办法 class Rat ...
- Plastic Sprayers Manufacturer -Plastic Spray Bottle Product Features, Nozzle Properties
Nowadays, plastic spray bottles are widely used in the plastic packaging industry. What are the char ...
- 【代码学习】PYTHON装饰器
一.装饰器 对原代码不修改的基础上完善代码 写代码要遵循开放封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭 ...
- jmeter循环读取数据库中的数据
1,添加一个jdbc请求 2,添加一个循环控制器,循环的次数为sql返回的记录数${var_#} 3,添加一个计数器(用来做变量拼接) 4,拼接变量,往目标接口发请求 最后脚本的构造如下:
- 浅析PHP页面局部刷新功能的实现小结(转)
转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...
- Servlet线程安全问题(转载)
转载地址:https://www.cnblogs.com/LipeiNet/p/5699944.html 前言:前面说了很多关于Servlet的一些基础知识,这一篇主要说一下关于Servlet的线程安 ...
- 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真(04)
在eetop上有好多好东西啊: Silvaco_TCAD_中文教程1 不过这个教程里是Linux系统的,而且工艺仿真占了比较大的篇幅. defect region=1 nta=5e17 wta=0.1 ...
- JS-find、filter、forEach、map
js这四个方法不会对空数组进行检测,也不会改变原始数组 find()方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined) //语法 array.find(function(v ...
- 微信公众平台接口获取时间戳为10位,java开发需转为13位
问题1:为什么会生成13位的时间戳,13位的时间戳和10时间戳分别是怎么来的 ? java的date默认精度是毫秒,也就是说生成的时间戳就是13位的,而像c++或者php生成的时间戳默认就是10位的, ...
- elasticsearch ik解析器
ik解析器 1. ik解析器 The IK Analysis plugin integrates Lucene IK analyzer (http://code.google.com/p/i ...