事件是在浏览器中发生的操作,可由用户或浏览器本身启动。
以下是一些可能在网站上发生的常见事件的示例:
页面加载完成
用户单击一个按钮
用户滚动文档
用户调整浏览器大小
用户移动鼠标
用户提交表单
用户按下键盘上的一个键
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当元素失去焦点时会触发该事件。
<input type="text" onfocus="func1(this)" onblur="func2(this)">测试看看‹/›
onchange元素的值更改时将触发该事件。
<input type="text" onchange="myFunc(this)" value="Hello">测试看看‹/›
onmouseover当将指针设备(通常是鼠标)移动到元素或其子元素之一时,将触发该事件。
onmouseout当将指针设备(通常是鼠标)移离元素或其子元素之一时,将触发该事件。
把鼠标指针移到我身上!!!
HTML参考:HTML事件属性参考
JavaScript参考:HTML DOM事件对象参考