事件（三）

来源：互联网发布：编程器使用方法编辑：程序博客网时间：2024/05/16 08:10

事件类型

“DOM3级事件”规定了以下几类事件：

UI事件，用户和页面元素的交互；

焦点事件，元素获得或失去焦点时触发；

鼠标事件，通过鼠标执行操作时触发；

滚轮事件，使用滚轮时触发；

文本事件，当在文档中输入文本时触发；

键盘事件，通过键盘操作时触发；

合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；

变动（mutation）事件，当底层DOM结构发生变化时触发；

变动名称事件，当元素或属性名变动时触发。（已废弃）

除了以上事件，HTML5也定义了一组事件；一些浏览器还有其他专有事件，这里就不做专门介绍了。

DOM3级事件模块在DOM2级事件模块的基础上重新定义了这些事件，添加了一些新事件。包括IE9在内的所有主流的浏览器都支持DOM2级事件。IE9也支持DOM3级事件。

UI事件

DOMActivate：表示元素已经被用户操作（通过鼠标或键盘）激活。DOM3级事件中已被废弃，不建议使用。

load：当页面完全加载完成后在window上面触发；当所有框架都加载完成时在框架集上面触发；当图像加载完成时在<img>元素上触发；当嵌入的内容加载完毕时在<object>元素上触发。

unload：当页面完全卸载时触发；所有框架都卸载后在框架集上触发；当嵌入的内容卸载完毕后在<object>上触发。

abort：在用户停止下载过程时，如果嵌入的内容没有加载完成，则在<object>元素上触发。

error：当发生JavaScript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，无法嵌入内容时在<object>上触发，或有框架无法加载时在框架集上触发。

select：当用户选择文本框（<input>或<textarea>）中的一或多个字符时触发。

resize：当窗口或框架的大小变化时在window或框架上触发。

scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发。<body>元素中包含所加载页面的滚动条。

除了DOMActivate之外，其他事件在DOM2级事件中都归为HTML事件,检测是否支持DOM2级事件：

var support = document.implementation.hasFeature("HTMLEvents","2.0");

检测浏览器是否支持“DOM3级事件”：

var support = document.implementation.hasFeature("UIEvent","3.0");

焦点事件

焦点事件会在页面获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activateElement属性配合，可以知晓用户在页面上的行踪：

blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持。

DOMFocusIn：在元素获得焦点时触发。这个事件与HTML事件focus等价，但他冒泡。(DOM3级事件废弃)

focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持。

focusin：在元素获得焦点时触发。这个事件与HTML事件focus等价，但是冒泡。主流浏览器都支持。

focusout：在元素失去焦点时触发。是HTML事件blur的通用版本。主流浏览器都支持。

注：blur和focus是早期就得到浏览器支持，但是最大的问题是不冒泡。之后，IE的focusin和focusout被DOM3级事件采纳为标准方式。

当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：

失去焦点的元素：focusout

获得焦点的元素：focusin

失去焦点的元素：blur

失去焦点的元素：DOMFocusOut

获得焦点的元素：focus

获得焦点的元素：DOMFocusIn

注：要确定浏览器是否支持这些事件，可以使用：

var isSupported = document.implementation.hasFeature("FocusEvent","3.0");

鼠标与滚轮事件

DOM3级事件定义了9个鼠标事件：

click：单击

dbclick：双击

mousedown：用户按下鼠标任意按钮时触发。

mouseenter：鼠标光标从元素外部首次移动到元素范围之内时触发。事件不冒泡，而且光标移动到后代元素上不会触发。

mouseleave：鼠标光标移动到元素范围之外时触发。事件不冒泡，而且光标移动到后代元素上不会触发。

mousemove：当鼠标指针在元素内部移动时重复触发。

mouseout：从元素中移动到元素外部时触发。

mouseover：当移入一个元素时，触碰边界时触发。

mouseup：用户释放鼠标时触发。

mousewheel:鼠标滚轮事件

在同一个元素上触发的顺序：

mousedown->mouseup->click->mousedown->mouseup->click->dblclick

注：要检查浏览器是否支持上面的所有事件：

var isSupported = document.implementation.hasFeature("MouseEvent","3.0");

只检查DOM2级事件（除dblclick、mouseenter和mouseleave之外的事件）：

var isSupported = document.implementation.hasFeature("MouseEvents","2.0");

客户区坐标位置

在浏览器视窗的位置：clientX和clientY，可以通过event对象获取这两个属性

页面坐标位置

顾名思义，就是鼠标在页面上的位置：pageX和pageY，可以通过event对象获取这两个属性

屏幕坐标位置

相对电脑屏幕的位置：screenX和screenY，可以通过event对象获取这两个属性

修改键

有时候鼠标会和其他按键一起使用：Shift、Ctrl、Alt、Meta。DOM也有4个属性与之对应：shiftKey、ctrlKey、altKey、metaKey。这些属性包含的都是布尔值，如果相应的键按下则为true，否则为false。

触摸设备

移动设备上一般是没有鼠标的，所以有以下几个点：

不支持dblclick事件。

轻击单击元素会触发mousemove事件，如果此操作会导致内容变化，将不再有其他事件发生；如果屏幕没有因此变化，则会依次发生mousedown、mouseup和click事件。

mousemove事件也会触发mouseover和mouseout事件。

两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件。

使用鼠标事件的注意点

使用click事件执行代码。

不要使用onmouseover向用户显示新的选项。

不要使用dblclick执行重要的操作。

0 0