HTML DOM Event 对象详解及事件处理

"HTML DOM Event 对象.doc" HTML DOM (Document Object Model) Event 对象是网页交互的核心，它代表了一个事件的状态，包括事件发生时的元素、键盘和鼠标的状态等信息。Event对象是事件处理程序（事件句柄）与事件交互的基础，使得开发者可以通过JavaScript来响应用户的各种操作，如点击、滚动、输入等。 事件句柄（EventHandlers）是HTML4.0引入的新特性，允许HTML元素响应特定的事件，从而执行相应的JavaScript代码。例如，当用户点击一个元素时，可以触发预设的JavaScript函数。以下是一些常见的事件句柄及其作用： 1. `onclick` - 当用户点击元素时触发。 2. `onmouseover` - 鼠标指针进入元素范围时触发。 3. `onmouseout` - 鼠标指针离开元素范围时触发。 4. `onkeydown` - 用户按下键盘键时触发。 5. `onkeyup` - 用户释放键盘键时触发。 6. `onkeypress` - 用户按下并释放键盘键（产生字符）时触发。 Event对象包含一系列属性，这些属性提供了关于事件的详细信息，例如： - `cancelBubble`：如果设置为`true`，事件将不再向父元素传播（阻止事件冒泡）。 - `fromElement` 和 `toElement`：分别表示鼠标在`mouseover`和`mouseout`事件中离开和进入的元素。 - `keyCode`：在键盘事件中，表示被按下的键的Unicode字符码或虚拟键盘码。 - `offsetX` 和 `offsetY`：表示事件在事件源元素内的位置坐标。 - `returnValue`：如果设置为`false`，可以取消事件源元素的默认行为。 - `srcElement`：引用生成事件的元素，相当于非标准的`event.target`。 - `x` 和 `y`：事件在页面上的绝对坐标。 随着标准的发展，W3C定义了第二级DOM事件标准，引入了一些新的属性和方法，如： - `bubbles`：返回一个布尔值，表示事件是否会在DOM树中逐级向上冒泡。 - `cancelable`：表示事件是否可以被取消。 - `currentTarget`：当前正在处理事件的元素，可能不同于`event.target`。 - `defaultPrevented`：如果`event.preventDefault()`已被调用，其值为`true`。 - `eventPhase`：表示事件处理的阶段，1表示捕获阶段，2表示目标元素，3表示冒泡阶段。 - `target`：事件实际影响的元素。 - `timeStamp`：事件发生的时间戳。 此外，还有`preventDefault()`方法用于阻止事件的默认行为，`stopPropagation()`方法用于阻止事件继续在DOM树中传播，以及`stopImmediatePropagation()`方法用于阻止事件在同一级别的其他事件处理程序执行。 了解和熟练使用HTML DOM Event对象，对于编写响应式和交互性强的网页至关重要。通过掌握这些事件和属性，开发者可以创建丰富的用户体验，实现复杂的网页交互功能。