跳转到内容

JavaScript/Event handling

维基教科书，自由的教学读本

事件处理器

[编辑]

可以处理的事件是浏览器窗口中发生的事情，包括文档加载、用户单击鼠标按钮、用户按下某个键以及浏览器屏幕改变大小。当分配一个函数来处理一个事件类型时，该函数会在该事件类型的事件发生时运行。

可以通过以下方式分配事件处理程序：

  • 直接通过 HTML 中的元素属性：<body onload="alert('Hello World!');">
  • 通过 JavaScript，通过将事件类型分配给元素属性：document.onclick = clickHandler;
  • 通过 JavaScript 直接调用一个元素的addEventListener()方法。

从脚本赋值一个处理程序使用的语法： '[element].[event] = [function];'，其中[element]是页面元素，[event] 是所选事件的名称，[function] 是事件发生时调用的函数的名称。

例如： 

document.onclick = clickHandler;

每当用户在屏幕上的任意位置单击鼠标时，此处理程序将导致函数clickHandler()被执行。请注意，当一个事件处理程序被赋值时，函数名称不以括号结尾。我们只是将事件指向函数的名称。clickHandler()函数定义如下： 

function clickHandler(event) {
  //some code here
}

在某些浏览器中，事件必须显式传递给函数，因此作为预防措施，通常最好包含一个条件来测试event变量是否已传递。如果没有，则使用那些适用于其它浏览器的替代方法： 

function clickHandler(event) {
  event = event || window.event;
  //some code here
}

也可以为文档中的元素赋值事件处理程序。例如： 

document.getElementsByTagName('a')[0].onclick = linkHandler;

这将导致当用户单击页面上的第一个链接时执行linkHandler()函数。

请记住，这种风格的处理程序赋值依赖于链接在页面内的位置。如果在此之前添加了另一个链接标签，它将接管原始链接的处理程序。最佳实践是通过使用id属性为每个链接分配一个标识符来保持代码和页面结构的分离。 

<a id="faqLink" href="faq.html">Faq</a>

然后，无论元素位于何处，处理程序赋值都可以工作。 

document.getElementById('faqLink').onclick = linkHandler;

事件是可以被 JavaScript 检测到的动作，事件对象提供有关已发生事件的信息。有时我们希望在事件发生时执行 JavaScript，例如当用户单击按钮时。事件通常与函数结合使用，在事件发生之前函数不会被执行！JavaScript 事件处理程序分为两种类型：

  • 交互式事件处理程序——依赖于用户与 HTML 页面的交互；例如，点击一个按钮
  • 非交互式事件处理程序 - 不需要用户交互；例如，on load

事件特性

[编辑]

下面是可以插入到不同HTML元素中以定义事件操作的事件特性。

特性 该事件发生在... IE Firefox Opera W3C 标准
onblur 元素失去焦点 3 1 9 是
onchange 字段内容发生变化 3 1 9 是
onclick 鼠标点击对象 3 1 9 是
ondblclick 鼠标双击一个对象 4 1 9 是
onerror 加载文档或图像时
发生错误		 4 1 9 是
onfocus 元素获得焦点 3 1 9 是
onkeydown 按下键盘键 3 1 No 是
onkeypress 按下或按住
键盘键		 3 1 9 是
onkeyup 键盘键被释放 3 1 9 是
onload 页面或图像
已完成加载		 3 1 9 是
onmousedown 按下鼠标按钮 4 1 9 是
onmousemove 鼠标移动 3 1 9 是
onmouseout 鼠标从元素上移开 4 1 9 是
onmouseover 鼠标移到一个元素上 3 1 9 是
onmouseup 释放鼠标按钮 4 1 9 是
onresize 调整窗口或框架的大小 4 1 9 是
onselect 文本被选中 3 1 9 是
onunload 文本被选中 3 1 9 是

鼠标/键盘属性：

属性 描述 IE Firefox Opera W3C 标准
altKey 返回触发事件时是否按下“ALT”键 6 1 9 Yes
button 返回触发事件时单击的鼠标按钮 6 1 9 Yes
clientX 返回触发事件时鼠标指针的水平坐标 6 1 9 Yes
clientY 返回触发事件时鼠标指针的垂直坐标 6 1 9 Yes
ctrlKey 返回触发事件时是否按下“CTRL”键 6 1 9 Yes
metaKey 返回触发事件时是否按下“meta”键 6 1 9 Yes
relatedTarget 返回与触发事件的元素相关的元素 No 1 9 Yes
screenX 返回触发事件时鼠标指针的水平坐标 6 1 9 Yes
screenY 返回触发事件时鼠标指针的垂直坐标 6 1 9 Yes
shiftKey 返回触发事件时是否按下“SHIFT”键 6 1 9 Yes

其他事件特性：

特性 描述 IE Firefox Opera W3C 标准
bubbles 返回一个布尔值，指示事件是否为冒泡事件 No 1 9 Yes
cancellable 返回一个布尔值，指示事件是否可以阻止其默认操作 No 1 9 Yes
currentTarget 返回其事件侦听器(listener)触发事件​​的元素 No 1 9 Yes
返回触发事件的元素 No 1 9 Yes
timeStamp 从纪元（系统启动或事件触发）返回时间戳，以毫秒为单位 No 1 9 Yes

标准事件处理程序

[编辑]
Attribute Trigger
onabort 图像加载中断
onblur 元素失去焦点
onchange 元素被修改
onclick 元素被点击
ondblclick 元素被双击
onerror 加载元素时出错
onfocus 元素获得焦点
onkeydown 当元素具有焦点时按下了一个键
onkeypress 元素接收到击键
onkeyup 当元素具有焦点时释放一个键
onload 加载了一个元素
onmousedown 在元素上按下鼠标按钮
onmousemove 鼠标指针在元素内移动
onmouseout 鼠标指针移到元素外
onmouseover 鼠标指针移动到元素上
onmouseup 鼠标按钮在元素上被释放
onreset 单击了表单的重置按钮
onresize 包含的窗口或框架已调整大小
onselect 元素内的文本被选中
onsubmit 正在提交表单
onunload 正在卸载内容（例如正在关闭窗口）
onscroll 用户滚动（在任何方向和以任何方式）

作为 HTML 特性的事件处理程序

[编辑]

在 HTML 中，JavaScript 事件可以包含在任何指定的属性中——例如，body 标签可以有一个onload事件： 

<body onload="alert('Hello World!');">

HTML 事件属性的内容是在事件触发时解释执行的 JavaScript 代码，其工作方式与 JavaScript 块非常相似。当您希望将 JavaScript 直接附加到相关标签时，可以使用这种形式的代码。

这种类型的技术称为内联 JavaScript，与之前介绍的其他不显眼的 JavaScript 技术相比，它可以被视为一种不太理想的技术。可以认为使用内联 JavaScript 在本质上类似于使用内联 CSS，其中 HTML 是通过将 CSS 放入样式属性中来设置样式的。这是一种最好应避免的做法，有利于更通用的技术。

addEventListener

[编辑]

此方法将事件处理程序添加到事件类型的元素，而不删除现有处理程序。

链接：

removeEventListener

[编辑]

此方法从给定事件类型的元素中删除特定事件处理程序。

链接：

keyCode

[编辑]

键盘事件的 keyCode 属性包含一个数字，指示按下了哪个键。

对于 keydown 事件，键代码包括 A 的 65 到 Z 的 90，以及 0 到 9 的 48 到 57。

例子： 

document.addEventListener("keydown", function(evt) {
  alert("Key pressed; key code: " + evt.keyCode);
  evt.preventDefault();
});

链接：

进一步阅读

[编辑]
检索自“https://zh.wikibooks.org/w/index.php?title=JavaScript/Event_handling&oldid=169713”