srcmini本文概述
JavaScript与HTML的交互是通过浏览器或用户操纵页面时发生的事件来处理的。事件是软件识别的事件或动作。系统或用户可以触发它们。
可以将事件声明为DOM(文档对象模型)级别3的一部分。事件发生在网页上进行某种类型的交互时。每个HTML元素都包含可以触发JavaScript代码的事件集合。事件的一些常见示例包括单击按钮, 单击超链接, 加载网页等。
事件处理程序
要对事件做出反应, 你可以分配一个处理程序(一个在事件发生时运行的函数)。可以将事件处理程序定义为在事件发生时执行的代码块。我们可以使用事件处理程序来定义JavaScript中事件的处理。
让我们尝试了解最常用的HTML事件。
事件类型
它是用户单击按钮时激活的最常用的事件类型之一。在这种事件类型中, 我们可以发出警告, 验证等。单击时, ” onclick”会调用分配给它的相应function()。
让我们通过一个例子来理解它。
例子
<html>
<head>
<script type = "text/javascript">
function hello() {
alert ("Hello World");
}
</script>
</head>
<body style="text-align:center;">
<p> Click the button</p>
<input type = "button" onclick = "hello()" value = "Click me " />
</body>
</html>在浏览器中执行上述代码时, 将获得以下输出。
输出如下
单击按钮后, 你将收到警报, 如下所示。
提交事件类型
当你需要提交表格时会发生这种情况。当你单击提交按钮时, ” onsubmit”将调用相应的” return function()”, 并以true或false接收来自function()的响应。如果function()返回true, 则将提交表单。否则, 它将不会提交数据。
onmouseout和onmouseover
这些事件可帮助你使用文本和图像创建效果。顾名思义, 将鼠标悬停在任何元素上时会触发onmouseover事件。将鼠标移出元素时, 会触发onmouseout事件。
让我们尝试通过使用以下示例来理解它们。
例子
<html>
<head>
<script type="text/javascript">
function mouseOver() {
document.getElementById("div1").style.color
= "blue";
document.getElementById("div2").innerHTML
= "mouseOver triggered";
document.getElementById("div2").style.color
= "green";
}
function mouseOut() {
document.getElementById("div1").style.color
= "magenta";
document.getElementById("div2").innerHTML
= "mouseOut triggered";
document.getElementById("div2").style.color
= "red";
}
</script>
</head>
<body style="text-align:center;">
<h1 id="div1" onmouseover="mouseOver()"
onmouseout="mouseOut()">
Bring your mouse inside it.
</h1>
<h3>
Move your cursor on the above heading to see the result.
</h3>
<h2><p id="div2"></p></h2>
</body>
</html>在浏览器中执行上述代码时, 将获得以下输出。
输出如下
将鼠标移到第一个标题上, 你将获得：
将鼠标从第一个标题移出, 你将获得：
HTML5标准事件
下表列出了一些常用的HTML事件。
| 属性 | 描述 |
|---|---|
| Onabort | 它在中止事件上触发。 |
| 离线 | 当文档脱机时, 它将触发。 |
| 印后 | 在文档打印后触发。 |
| onbeforeonload | 它在加载文档之前触发。 |
| 印前 | 它在打印文档之前触发。 |
| Onblur | 当窗口失去焦点时触发。 |
| 不断变化 | 元素更改时触发。 |
| 点击 | 单击鼠标时触发。 |
| 上下文菜单 | 当上下文菜单被触发时触发。 |
| oncanplay | 当媒体可以开始播放时触发。 |
| oncanplaythrough | 当媒体播放到最后而没有任何缓冲或停止时, 它将触发。 |
| ondbclick | 双击鼠标即可触发。 |
| 拖曳 | 拖动元素时触发。 |
| 落下 | 当拖放元素时触发。 |
| 昂德拉贡 | 拖动操作结束时触发。 |
| 激进者 | 当元素拖动到放置目标时触发。 |
| 德拉格里夫 | 当元素离开放置目标时触发。 |
| Ondragover | 当将元素拖动到放置目标上时触发。 |
| ondragstart | 它在拖动操作开始时触发。 |
| 持续变化 | 更改介质长度时触发。 |
| 在 | 当媒体到达终点时触发。 |
| 无所不能 | 当媒体中的资源元素突然变空时触发。 |
| 专注 | 当窗口获得焦点时触发。 |
| 错误 | 它在发生错误时触发。 |
| 形式变更 | 表单更改时触发。 |
| onforminput | 当表单从用户获取输入时触发。 |
| 变迁 | 它触发文档的更改。 |
| oninput | 当元素从用户获得输入时触发。 |
| 无效 | 它在无效元素上触发。 |
| 按键 | 释放钥匙时触发。 |
| 按键 | 按下键时触发。 |
| 按键 | 释放并按下键时触发。 |
| 负载 | 它在文档加载时触发。 |
| 加载的元数据 | 加载媒体元素的媒体数据和持续时间时触发。 |
| 加载的数据 | 加载媒体数据时触发。 |
| 消息 | 它在消息触发时触发。 |
| onloadstart | 当浏览器开始加载媒体数据时触发。 |
| 情绪激动 | 它在鼠标指针移动时触发。 |
| 鼠标停下 | 在按下鼠标按钮时触发。 |
| 鼠标悬停 | 当你将鼠标指针移到某个元素上时触发。 |
| 的onmouseout | 当鼠标指针从元素移出时触发。 |
| 鼠标悬停 | 释放鼠标按钮时触发。 |
| onmousewheel | 旋转鼠标滚轮时触发。 |
| 在线上 | 当文档在线时触发。 |
| 离线 | 当文档离线时触发。 |
| 页面显示 | 当窗口可见时触发。 |
| 页面隐藏 | 窗口隐藏时触发。 |
| 进行中 | 当媒体数据开始播放时触发。 |
| 正在播放 | 在播放媒体数据时触发。 |
| 暂停 | 媒体数据暂停时触发。 |
| 进行中 | 当浏览器获取媒体数据时触发。 |
| onpopstate | 窗口历史记录更改时触发。 |
| 利率变化 | 当媒体数据的播放速率改变时触发。 |
| 就绪状态变更 | 当就绪状态更改时, 它将触发。 |
| Onredo | 当文档正在执行重做操作时, 它将触发。 |
| onResize受到 | 当窗口调整大小时触发。 |
| 滚动 | 当元素的滚动条滚动时触发。 |
| 寻求 | 当media元素的seek属性为true且开始搜索时触发。 |
| 寻求 | 当媒体元素的搜索属性不为真且搜索结束时触发。 |
| 取消选择 | 当元素被选中时触发。 |
| 已安装 | 媒体数据的获取错误时触发。 |
| 提交 | 表单提交时触发。 |
| 储存 | 当文档加载时触发。 |
| 音量变化 | 当媒体元素更改其音量或音量处于静音状态时, 它将触发。 |
| 等待中 | 当媒体元素停止播放但预期会恢复播放时触发。 |
| onunload | 当用户离开文档时触发。 |
| onundo | 当文档执行撤消操作时触发。 |
| ontimeupdate | 当媒体元素的播放位置改变时触发。 |
| 暂停 | 它在浏览器获取媒体数据但在获取完整的媒体文件之前停止时触发。 |
评论前必须登录！
注册