JavaScript 事件基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
对象状态的变化称为
事件。在html中，有各种事件表示某些活动是由用户或浏览器执行的。当HTML中包含
javascript 代码时，js对这些事件做出反应并允许执行。对事件做出反应的过程称为
事件处理。因此，js通过
事件处理程序处理HTML事件。
例如，当用户单击浏览器时，添加js代码，该代码将执行
一些HTML事件及其事件处理程序为：
鼠标事件：
| 已执行事件 | 事件处理程序 | 说明 |
| click | onclick | 当鼠标单击元素时 |
| mouseover | onmouseover | 当鼠标光标移到元素上 |
| mouseout | onmouseout | 鼠标光标离开元素时 |
| mousedown | onmousedown | 在元素上按下鼠标按钮 |
| mouseup | onmouseup | 在元素上释放鼠标按钮时 |
| mousemove | onmousemove | 发生鼠标移动时。 |
键盘事件：
| 已执行事件 | 事件处理程序 | 说明 |
| Keydown & Keyup | onkeydown & onkeyup | 当用户按下然后释放键时 |
表单事件：
| 已执行事件 | 事件处理程序 | 说明 |
| focus | 专注 | 当用户关注某个元素时 |
| submit | 提交后 | 用户提交表单时 |
| blur | onblur | 当焦点远离表单元素时 |
| change | onchange | 当用户修改或更改表单元素的值时 |
窗口/文档事件
| 已执行事件 | 事件处理程序 | 说明 |
| load | 加载 | 浏览器完成页面加载后 |
| unload | onunload | 访问者离开当前网页时，浏览器将其卸载 |
| resize | onresize | 访问者调整浏览器窗口大小时 |
让我们讨论事件及其处理程序的一些示例。
点击事件
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is lidihuo");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is lidihuo");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
MouseOver事件
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is lidihuo");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is lidihuo");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
Focus事件
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>
Keydown事件
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>
Load事件
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>