【JavaScript学习】事件:事件类型
2017-11-24 10:02
274 查看
DOM3 级事件规定了以下几类事件:
UI(User Interface,用户界面)事件,当用户与页面上的元素交互时触发;
焦点事件,当元素获得或失去焦点时触发;
鼠标事件,当用户通过鼠标在页面上执行操作时触发;
滚轮事件,当使用鼠标滚轮(或类似设备)时触发;
文本事件,当在文档中输入文本时触发;
键盘事件,当用户通过键盘在页面上执行操作时触发;
合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时触发;
变动(mutation)事件,当底层 DOM 结构发生变化时触发。
变动名称事件,当元素或属性名变动时触发。此类事件已经被废弃,没有任何浏览器实现它们。
多数这些事件都与window对象或表单空间相关。
除了DOMActivate之外,其他事件在 DOM2 级事件中都归为HTML事件(DOMActivate在 DOM2 级中任然属于UI事件)。
要确定浏览器是否支持“DOM3 级事件”定义的事件,可以使用如下代码:
4000
全加载后(包括所有图像、js文件、css文件等外部资源),就会触发window上面的load事件。
有两种定义onload事件处理程序的方式。
1、使用JavaScript代码:
2、为<body>元素添加一个onload特性:
图像上面也可以触发load事件,无论是在DOM元素中的图像元素还是HTML中的图像元素。因此可以在HTML中为任何图像指定onload事件处理程序:
同样的功能也可以用javascript完成:
在创建新的< img>元素时,可以为其指定一个事件处理程序,以便图像加载完毕后给出提示。此时,最重要的是要在指定src属性之前先指定事件。
还有一些元素也以非标准的方式支持load事件:
<script>元素也会触发load事件,以便开发人员确定动态加载的javascript文件是否加载完毕。
与图像不同,只有在设置了<script>元素的src属性并将该元素添加到文档后,才会开始下载Javascript文件。换句话说,对于<script>元素而言,指定src属性和指定事件处理程序的先后顺序就不重要了。
IE和Opera还支持< link>元素上的load事件,以便开发人员确定样式表是否加载完毕。
与< script>节点类似,在未指定href属性并将< link>元素添加到文档之前也不会开始下载样式表。
只要用户从一个页面切换到另一个页面,就会发生unload事件。而利用这个事件最多的情况就是清除引用,以避免内存泄露。
与load事件类似,也有两种指定onunload事件处理程序的方式:
1、使用JavaScript代码:
2、为<body>元素添加一个onunload特性:
这个事件在window上面触发,因此可以通过Javascript或者<body>元素中的onresize特性来指定事件处理程序。
在兼容DOM的浏览器中,event.target = document;而 IE8 及之前的版本则未提供任何属性。
关于何时会触发resize事件,不同的浏览器有不同的机制:
Firefox:只会在用户停止调整窗口大小时才会触发resize事件。
其他浏览器:只要浏览器窗口变化了1像素时就触发,然后随着变化不断重复触发。
由于存在这个差别,应该注意不要在这个事件的处理程序中加入大计算量的代码,因为这些代码有可能被频繁执行,从而导致浏览器反应明显变慢。
浏览器窗口最小化或最大化时也会触发resize事件。
在混杂模式下,可以通过<body>元素的scrollLeft和scrollTop来监控这一变化。 在标准模式下,除了Safari之外的所有浏览器都会通过<html>元素来反映这一变化。
与resize事件类似,scroll事件也会在文档被滚动期间重复被触发,所以有必要尽量保持事件处理程序的代码简单。
利用这些事件并与document.hasFocus()方法及document.activeElement属性配合,可以知晓用户在页面上的行踪。
这一类事件中最主要的两个是focus和blur,他们都是JavaScript早期就得到所有浏览器支持的事件,但它们不冒泡,因此才会有focusin和focusout被纳入标准方式。
当焦点从页面的一个元素移动到另一个元素,会依次触发下列事件:
focusout:在失去焦点的元素上触发
focusin:在获得焦点的元素上触发
blur:在失去焦点的元素上触发
focus:在获得焦点的元素上触发
其中,focusout和blur的事件目标是失去焦点的元素;focus和focusin的事件目标是获得焦点的元素。
DOM3级事件中定义了9个鼠标事件:
页面上所有元素都支持鼠标事件。除了mouseenter和mouseleave,所有鼠标事件都会冒泡,也可以被取消。
只有在同一个元素上相继触发mousedown和mouseup事件,才会触发click事件;
如果mousedown或mouseup中的一个被取消,就不会触发click事件;
只有触发两次click事件,才会触发一次dbclick事件;
如果有代码阻止了连续两次触发click事件,那么就不会触发dbclick事件了。
这4个事件触发的顺序始终如下:
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
click和dbclick都会依赖与其他先行事件的触发;而mousedown和mouseup则不受其他事件影响。
鼠标事件中还有一个滚轮事件mousewheel,这个事件跟踪鼠标滚轮。
UI(User Interface,用户界面)事件,当用户与页面上的元素交互时触发;
焦点事件,当元素获得或失去焦点时触发;
鼠标事件,当用户通过鼠标在页面上执行操作时触发;
滚轮事件,当使用鼠标滚轮(或类似设备)时触发;
文本事件,当在文档中输入文本时触发;
键盘事件,当用户通过键盘在页面上执行操作时触发;
合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时触发;
变动(mutation)事件,当底层 DOM 结构发生变化时触发。
变动名称事件,当元素或属性名变动时触发。此类事件已经被废弃,没有任何浏览器实现它们。
UI事件
UI事件指的是那些不一定与用户操作有关的事件。事件 | 描述 |
---|---|
DOMActivate | 元素已经被用户操作(鼠标或键盘)激活。已被废弃。 |
load | 页面完全加载完后在window上触发,所有框架加载完毕后在框架集上触发,图像加载完毕在img元素上触发,当嵌入内容加载完毕在object元素上触发。 |
unload | 页面完全卸载(window触发),所有框架都卸载后(框架集触发),嵌入内容卸载完毕后(object触发)。 |
abort | 当用户停止下载过程,如果嵌入内容没有加载完,则在object元素上除法。 |
error | 当发生JavaScript错误时(window触发),当无法加载图像时(img触发),当无法加载嵌入内容时(object触发),当一或多个框架无法加载(框架集触发)。 |
select | 当用户选择文本框(texterea或input)中的一个或多个字符时触发。 |
resize | 当窗口或框架的大小变化时在window或框架上触发。 |
scroll | 当用户滚动带滚动条的元素中的内容时,在该元素上触发。 |
除了DOMActivate之外,其他事件在 DOM2 级事件中都归为HTML事件(DOMActivate在 DOM2 级中任然属于UI事件)。
要确定浏览器是否支持“DOM3 级事件”定义的事件,可以使用如下代码:
var isSupported = document.implementation.hasFeature("UIEvent","3.0");
1、load事件
js中最常用的一个事件就是load。当页面完4000
全加载后(包括所有图像、js文件、css文件等外部资源),就会触发window上面的load事件。
有两种定义onload事件处理程序的方式。
1、使用JavaScript代码:
EventUtil.addHandler(window,"load",function(event){ alert("Loaded"); });
2、为<body>元素添加一个onload特性:
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>Title</title> </head> <body onload="alert('Loaded!');"> <body> </html>
图像上面也可以触发load事件,无论是在DOM元素中的图像元素还是HTML中的图像元素。因此可以在HTML中为任何图像指定onload事件处理程序:
<img src="smile.gif" onload="alert('Image loaded.')">
同样的功能也可以用javascript完成:
var img = document.getElementById("myImg"); EventUtil.addHandler(img,"load",function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); });
在创建新的< img>元素时,可以为其指定一个事件处理程序,以便图像加载完毕后给出提示。此时,最重要的是要在指定src属性之前先指定事件。
//首先为window指定了onload事件处理程序。 //向DOM中添加一个新元素,必须确定页面已经加载完毕——如果在页面加载前操作document.body会导致错误。 EventUtil.addHandler(window,"load",function(){ //然后,创建了一个新的图像元素,并设置了其onload事件处理程序。 var image = document.createElement("img"); EventUtil.addHandler(image,"load",function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); }); //最后将这个图像添加到页面中,还设置了它的src属性。 document.body.appendChild(image); image.src = "smile.gif"; //新图像元素不一定要从添加到文档后才开始下载,只要设置了src属性就会开始下载。 });
还有一些元素也以非标准的方式支持load事件:
<script>元素也会触发load事件,以便开发人员确定动态加载的javascript文件是否加载完毕。
与图像不同,只有在设置了<script>元素的src属性并将该元素添加到文档后,才会开始下载Javascript文件。换句话说,对于<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); });
IE和Opera还支持< link>元素上的load事件,以便开发人员确定样式表是否加载完毕。
与< script>节点类似,在未指定href属性并将< link>元素添加到文档之前也不会开始下载样式表。
2、unload事件
这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会发生unload事件。而利用这个事件最多的情况就是清除引用,以避免内存泄露。
与load事件类似,也有两种指定onunload事件处理程序的方式:
1、使用JavaScript代码:
EventUtil.addHandler(window,"unload",function(event){ alert("Unloaded"); //此时生成的event对象在兼容DOM的浏览器中只包含target属性(值为document)。 //IE8 及之前版本则为这个事件对象提供了 srcElement 属性。 });
2、为<body>元素添加一个onunload特性:
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>Title</title> </head> <body onunload="alert('Unloaded!');"> <body> </html>
3、resize事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件。这个事件在window上面触发,因此可以通过Javascript或者<body>元素中的onresize特性来指定事件处理程序。
EventUtil.addHandler(window,"resize",function(event){ alert("resize"); });
在兼容DOM的浏览器中,event.target = document;而 IE8 及之前的版本则未提供任何属性。
关于何时会触发resize事件,不同的浏览器有不同的机制:
Firefox:只会在用户停止调整窗口大小时才会触发resize事件。
其他浏览器:只要浏览器窗口变化了1像素时就触发,然后随着变化不断重复触发。
由于存在这个差别,应该注意不要在这个事件的处理程序中加入大计算量的代码,因为这些代码有可能被频繁执行,从而导致浏览器反应明显变慢。
浏览器窗口最小化或最大化时也会触发resize事件。
4、scroll事件
虽然scroll事件是在window对象上发生的,但它实际表示的则是页面中相应元素的变化。在混杂模式下,可以通过<body>元素的scrollLeft和scrollTop来监控这一变化。 在标准模式下,除了Safari之外的所有浏览器都会通过<html>元素来反映这一变化。
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属性配合,可以知晓用户在页面上的行踪。
事件 | 描述 |
---|---|
blur | 在元素失去焦点时触发,这个事件不会冒泡。 |
focus | 在元素获得焦点时触发,这个事件不会冒泡。 |
focusin | 在元素获得焦点时触发,与HTML事件focus等价,但它冒泡。 |
focusout | 在元素失去焦点时触发,这个事件是HTML事件blur的通用版本。 |
DOMFocusIn | 在元素获得焦点时触发。DOM3 级事件废弃了DOMFocusIn,选择了focusin。 |
DOMFocusOut | 在元素失去焦点时触发。DOM3 级事件废弃了DOMFocusIn,选择了focusout。 |
当焦点从页面的一个元素移动到另一个元素,会依次触发下列事件:
focusout:在失去焦点的元素上触发
focusin:在获得焦点的元素上触发
blur:在失去焦点的元素上触发
focus:在获得焦点的元素上触发
其中,focusout和blur的事件目标是失去焦点的元素;focus和focusin的事件目标是获得焦点的元素。
鼠标与滚轮事件
鼠标事件是web开发中最常用的一类事件。DOM3级事件中定义了9个鼠标事件:
事件 | 描述 |
---|---|
click | 在用户单击主鼠标按钮或按下回车键时触发。这意味着onclick事件处理程序即可以通过键盘也可以通过鼠标执行。 |
dbclick: | 在用户双击主鼠标按钮时触发。 |
mousedown | 用户按下了任意鼠标按钮时触发,不能通过键盘触发这个事件。 |
mouseenter | 在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。 |
mouseleave | 在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。 |
mousemove | 当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。 |
mouseout | 在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。 |
mouseover | 在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。 |
mouseup | 在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。 |
只有在同一个元素上相继触发mousedown和mouseup事件,才会触发click事件;
如果mousedown或mouseup中的一个被取消,就不会触发click事件;
只有触发两次click事件,才会触发一次dbclick事件;
如果有代码阻止了连续两次触发click事件,那么就不会触发dbclick事件了。
这4个事件触发的顺序始终如下:
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
click和dbclick都会依赖与其他先行事件的触发;而mousedown和mouseup则不受其他事件影响。
鼠标事件中还有一个滚轮事件mousewheel,这个事件跟踪鼠标滚轮。
相关文章推荐
- JavaScript事件类型学习
- JavaScript事件学习小结(五)js中事件类型之鼠标事件
- javascript学习笔记整理(概述、变量、数据类型简介)
- javascript事件学习笔记
- Esper学习之二:事件类型
- javascript学习之类型检测
- 【学习笔记】JavaScript编码规范-类型
- Javascript学习笔记1 数据类型
- JavaScript 中的事件类型3(读书笔记思维导图)
- javascript学习-类型判断
- JavaScript学习-Array类型
- javascript类型系统 Window对象学习笔记
- javascript基本包装类型学习笔记之----基本包装类型的基本特点
- javascript基础学习之-事件冒泡
- JavaScript学习笔记之事件冒泡和事件捕获
- Javascript学习笔记13——关于响应事件
- javascript学习笔记(四) Number 数字类型
- JavaScript事件响应学习
- JavaScript 学习笔记【二】——事件侦听兼容写法
- JavaScript高程学习笔记之事件(13)