JS事件和事件处理器 – JavaScript教程 _js事件处理器

上一章JavaScript教程请查看：JS操作符
在本教程中，你将学习如何使用JavaScript处理事件。
理解事件和事件处理程序事件是用户与web页面交互时发生的事情，例如单击链接或按钮、向输入框或文本区输入文本、在选择框中进行选择、按键盘上的键、移动鼠标指针、提交表单等。在某些情况下，浏览器本身可以触发事件，例如页面加载和卸载事件。
当事件发生时，你可以使用JavaScript事件处理程序(或事件监听器)来检测它们并执行特定的任务或一组任务。按照惯例，事件处理程序的名称总是以“on”开头，因此单击事件的事件处理程序称为onclick，加载事件的事件处理程序称为onload，模糊事件的事件处理程序称为onblur，等等。
有几种分配事件处理程序的方法。最简单的方法是使用特殊的事件处理程序属性将它们直接添加到HTML元素的开始标记中。例如，要为按钮元素分配一个单击处理程序，我们可以使用onclick属性，如下所示:

< button type="button" onclick="alert('Hello World!')">点击< /button>

但是，为了使JavaScript与HTML分离，可以在外部JavaScript文件中或在标记中设置事件处理程序，如下所示

< button type="button" id="myBtn">点击< /button> < script> function sayHello() { alert('Hello World!'); } document.getElementById("myBtn").onclick = sayHello; < /script>

注意: 由于HTML属性是大小写不敏感的，所以onclick也可以写成onclick、onclick或onclick。但是它的值是大小写敏感的。
一般来说，事件可以分为四大类: 鼠标事件、键盘事件、表单事件和文档/窗口事件。还有许多其他事件，我们将在后面的章节中学习，下一节将逐一介绍最有用的事件，并给出实际的实践示例。
鼠标事件当用户单击某个元素、将鼠标指针移动到某个元素上时，将触发鼠标事件。以下是一些最重要的鼠标事件及其事件处理程序。
单击事件(onclick)
单击事件发生在用户单击web页面上的一个元素时。通常，这些是表单元素和链接。可以使用onclick事件处理程序处理click事件。
下面的示例将在你单击元素时显示警告消息。

< button type="button" onclick="alert('你点击了一个按钮!'); ">点击< /button> < a href="http://www.srcmini.com/#" onclick="alert('点击了一个链接!'); ">点击< /a>

Contextmenu事件(oncontextmenu)
当用户单击元素上的鼠标右键以打开上下文菜单时，将发生contextmenu事件。可以使用oncontextmenu事件处理程序处理contextmenu事件。
下面的示例将在右键单击元素时显示一条警告消息。

< button type="button" oncontextmenu="alert('右键点击!'); ">右键点击< /button> < a href="http://www.srcmini.com/#" oncontextmenu="alert('右键点击链接!'); ">右键点击链接< /a>

Mouseover事件(onmouseover)
当用户将鼠标指针移动到元素上时，将发生mouseover事件。
你可以使用onmouseover事件处理程序来处理mouseover事件，当你将鼠标放在元素上时，下面的示例将显示一条警告消息。

< button type="button" onmouseover="alert('将鼠标指针置于按钮上!'); ">讲鼠标指针放在这里< /button> < a href="http://www.srcmini.com/#" onmouseover="alert('已经将鼠标指针放在链接上!'); ">将鼠标放在这里< /a>

Mouseout事件(onmouseout)
mouseout事件发生在用户将鼠标指针移出元素时。
你可以使用onmouseout事件处理程序来处理mouseout事件，下面的示例将在mouseout事件发生时显示一条警告消息。

< button type="button" onmouseout="alert('你已经移出了按钮!'); ">把鼠标放在这里，然后离开< /button> < a href="http://www.srcmini.com/#" onmouseout="alert('已经移出了链接!'); ">把鼠标放在这里，然后离开< /a>

键盘事件当用户按下或释放键盘上的键时，将触发键盘事件，以下是一些最重要的键盘事件及其事件处理程序。
Keydown事件(onkeydown)
当用户按下键盘上的一个键时，keydown事件发生。
你可以使用onkeydown事件处理程序来处理keydown事件。下面的示例将在发生keydown事件时显示警告消息。

< input type="text" onkeydown="alert('在文本输入中按了一个键!')"> < textarea onkeydown="alert('你按了文本区里面的一个键!')">< /textarea>

Keyup事件(onkeyup)
keyup事件发生在用户释放键盘上的一个键时。
你可以使用onkeyup事件处理程序来处理keyup事件，下面的示例将在发生keyup事件时显示一条警告消息。

< input type="text" onkeyup="alert('在文本输入中释放了一个键!')"> < textarea onkeyup="alert('你在文本区中释放了一个键!')">< /textarea>

按键事件(onkeypress)
当用户按下键盘上具有与其关联的字符值的键时，将发生按键事件。例如，像Ctrl、Shift、Alt、Esc、箭头键等键不会生成按键事件，但会生成keydown和keyup事件。
可以使用onkeypress事件处理程序处理击键事件。下面的示例将在按键事件发生时显示警告消息。

< input type="text" onkeypress="alert('你已经按了文本输入里面的一个键!')"> < textarea onkeypress="alert('你按了文本区里面的一个键!')">< /textarea>

表单事件当表单控件接收或失去焦点时，或者当用户修改表单控件值时(例如通过在文本输入中键入文本、在选择框中选择任何选项等)，表单事件将被触发。下面是一些最重要的表单事件及其事件处理程序。
焦点事件(onfocus)
当用户将焦点给予web页面上的元素时，将发生焦点事件。
你可以使用onfocus事件处理程序来处理焦点事件。下面的示例将在接收到焦点时用黄色突出显示文本输入的背景。

< script> function highlightInput(elm){ elm.style.background = "yellow"; } < /script> < input type="text" onfocus="highlightInput(this)"> < button type="button">Button< /button>

注意: 事件处理程序中这个关键字的值指的是其上有处理程序的元素(即事件当前被交付的位置)。
模糊事件(onblur)
当用户将焦点从表单元素或窗口移开时，就会发生模糊事件。
你可以使用onblur事件处理程序来处理blur事件。下面的示例将在文本输入元素失去焦点时显示警告消息。

< input type="text" onblur="alert('文本输入失去焦点!')"> < button type="button">提交< /button>

要将焦点从表单元素移开，首先单击表单元素内部，然后按键盘上的tab键，将焦点放在其他内容上，或者单击表单元素外部。
更改事件(onchange)
当用户更改表单元素的值时发生更改事件。
你可以使用onchange事件处理程序处理更改事件。当你更改选择框中的选项时，下面的示例将显示一条警告消息。

< select onchange="alert('你已经更改了选择!'); "> < option>选择< /option> < option>Male< /option> < option>Female< /option> < /select>

提交事件(onsubmit)
提交事件仅在用户在web页面上提交表单时发生。
你可以使用onsubmit事件处理程序处理提交事件。下面的示例将在向服务器提交表单时显示一条警告消息。

< form action="action.php" method="post" onsubmit="alert('表单数据将提交给服务器!'); "> < label>First Name:< /label> < input type="text" name="first-name" required> < input type="submit" value="http://www.srcmini.com/Submit"> < /form>

文档/窗口事件在页面加载或用户调整浏览器窗口大小等情况下也会触发事件。以下是一些最重要的文档/窗口事件及其事件处理程序。
加载事件(onload)
加载事件发生在web页面在web浏览器中完成加载之后。
你可以使用onload事件处理程序处理load事件。下面的示例将在页面完成加载后立即显示警告消息。

< body onload="window.alert('页面加载成功!'); "> < h1>这是标题< /h1> < p>这是文本段落< /p> < /body>

卸载事件(onunload)
卸载事件发生在用户离开当前web页面时。
可以使用onunload事件处理程序处理unload事件。下面的示例将在你尝试离开页面时显示一条警告消息。

< body onunload="alert('你确定要离开这一页吗?'); "> < h1>标题< /h1> < p>文本段落< /p> < /body>

Resize事件(onresize)
当用户调整浏览器窗口的大小时发生调整大小事件，当浏览器窗口最小化或最大化时，也会发生调整大小事件。
【JS事件和事件处理器 – JavaScript教程】可以使用onresize事件处理程序处理resize事件。当你将浏览器窗口的大小调整到新的宽度和高度时，下面的示例将显示一条警告消息。

< p id="result">< /p> < script> function displayWindowSize() { var w = window.outerWidth; var h = window.outerHeight; var txt = "Window size: width=" + w + ", height=" + h; document.getElementById("result").innerHTML = txt; } window.onresize = displayWindowSize; < /script>