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

上一章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="#" onclick="alert('点击了一个链接!');">点击</a>

Contextmenu事件(oncontextmenu)

当用户单击元素上的鼠标右键以打开上下文菜单时，将发生contextmenu事件。可以使用oncontextmenu事件处理程序处理contextmenu事件。

下面的示例将在右键单击元素时显示一条警告消息。

<button type="button" oncontextmenu="alert('右键点击!');">右键点击</button>
<a href="#" oncontextmenu="alert('右键点击链接!');">右键点击链接</a>

Mouseover事件(onmouseover)

当用户将鼠标指针移动到元素上时，将发生mouseover事件。

你可以使用onmouseover事件处理程序来处理mouseover事件，当你将鼠标放在元素上时，下面的示例将显示一条警告消息。

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

Mouseout事件(onmouseout)

mouseout事件发生在用户将鼠标指针移出元素时。

你可以使用onmouseout事件处理程序来处理mouseout事件，下面的示例将在mouseout事件发生时显示一条警告消息。

<button type="button" onmouseout="alert('你已经移出了按钮!');">把鼠标放在这里，然后离开</button>
<a href="#" 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="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)

当用户调整浏览器窗口的大小时发生调整大小事件，当浏览器窗口最小化或最大化时，也会发生调整大小事件。

可以使用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>