JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JavaScript 事件(Events)

事件是在浏览器中发生的操作,可由用户或浏览器本身启动。

以下是一些可能在网站上发生的常见事件的示例:

  • 页面加载完成

  • 用户单击一个按钮

  • 用户滚动文档

  • 用户调整浏览器大小

  • 用户移动鼠标

  • 用户提交表单

  • 用户按下键盘上的一个键

  • HTML输入字段已更改

每个可用事件都有一个事件处理程序,该事件处理程序是代码块(通常是用户定义的JavaScript函数),将在事件触发时运行。

通过了解事件,您将能够为最终用户提供更具交互性的Web体验。

一个简单的实例

当事件触发时,例如用户单击按钮时,可以执行JavaScript代码块。

在下面的示例中,我们有一个按钮,按下该按钮将调用showDate()函数:

<button onclick="showDate()">Click me</button>

JavaScript showDate()函数如下所示:

<script>
function showDate() {
   document.getElementById("output").innerHTML = new Date();
}
</script>
测试看看‹/›

使用事件的方式

可以通过三种方式将事件分配给元素,以便在关联事件触发时将其运行:

  • 内联事件处理程序

  • 事件处理程序属性

  • 事件监听器

我们将介绍所有三种方法,以确保您熟悉触发事件的每种方式。

内联事件处理程序属性

要将事件分配给HTML元素,我们可以使用HTML事件属性

在以下示例中,当用户单击<p>元素时,其内容会更改:

<p onclick="this.innerHTML = 'Hello world'">单击此处更改此文本</p>
测试看看‹/›

在下面的示例中,当用户单击<p>元素时,将调用一个函数:

<p onclick="changeText(this)">单击此处更改此文本</p>

<script>
function changeText(self) {
   self.innerHTML = "Hello world";
}
</script>
测试看看‹/›

在下面的示例中,我们有一个按钮,按下该按钮将使背景变为随机颜色:

<button onclick="bgChange()">Click me</button>

<script>
function bgChange() {
   let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = color;
}
</script>
测试看看‹/›

内联事件处理程序是开始理解事件的简单方法,但通常不应将其用于测试和教育目的之外。

事件处理程序属性

内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常相似,除了我们在JavaScript中设置元素的属性而不是HTML中的属性。

在以下示例中,我们将为id为“ para”的HTML元素分配onclick事件:

let para = document.querySelector("#para");

para.onclick = function() {
   this.innerHTML = "Hello world";
}
测试看看‹/›

我们还可以将事件处理程序属性设置为等于命名函数名称:

let para = document.querySelector("#para");
para.onclick = changeText;

function changeText() {
   para.innerHTML = "Hello world";
}
测试看看‹/›

在上面的示例中,将名为changeText的函数分配给具有id="para"的HTML元素。

单击该元素时将执行该功能。

在下面的示例中,我们有一个按钮,按下该按钮将使背景变为随机颜色:

let btn = document.querySelector("button");
btn.onclick = bgChange;

function bgChange() {
   let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = color;
}
测试看看‹/›

注意:事件处理程序不遵循大多数JavaScript代码所遵循的camelCase 驼峰命名约定。注意,代码是onclick,不是onClick

onfocus和onblur事件

onfocus当元素获得焦点时触发该事件。

onblur当元素失去焦点时会触发该事件。

<input type="text" onfocus="func1(this)" onblur="func2(this)">
测试看看‹/›

onchange事件

onchange元素的值更改时将触发该事件。

<input type="text" onchange="myFunc(this)" value="Hello">
测试看看‹/›

onmouseover和onmouseout事件

onmouseover当将指针设备(通常是鼠标)移动到元素或其子元素之一时,将触发该事件。

onmouseout当将指针设备(通常是鼠标)移离元素或其子元素之一时,将触发该事件。

把鼠标指针移到我身上!!!

进一步阅读

HTML参考:HTML事件属性参考

JavaScript参考:HTML DOM事件对象参考