JavaScript教程-JavaScript事件
对象状态的改变被称为事件。在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 | onfocus | 当用户聚焦在元素上时 |
| submit | onsubmit | 当用户提交表单时 |
| blur | onblur | 当焦点从表单元素中移开时 |
| change | onchange | 当用户修改或更改表单元素的值时 |
窗口/文档事件
| 执行的事件 | 事件处理程序 | 描述 |
|---|---|---|
| load | onload | 当浏览器完成页面加载时 |
| unload | onunload | 当访问者离开当前网页时，浏览器会卸载它 |
| resize | onresize | 当访问者调整浏览器窗口大小时 |
让我们讨论一些事件及其处理程序的示例。
单击事件
<!DOCTYPE html>
<html>
<head>
<title>Javascript Events</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
<!--
function clickevent() {
document.write("This is JavaTpoint");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?" />
</form>
</body>
</html>鼠标悬停事件
<!DOCTYPE html>
<html>
<head>
<h1>Javascript Events</h1>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
<!--
function mouseoverevent() {
alert("This is JavaTpoint");
}
//-->
</script>
<p onmouseover="mouseoverevent()">Keep cursor over me</p>
</body>
</html>聚焦事件
<!DOCTYPE html>
<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>按键事件
<!DOCTYPE html>
<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>加载事件
<!DOCTYPE html>
<html>
<head>Javascript Events</head>
<body onload="window.alert('Page successfully loaded');">
<script>
document.write("The page is loaded successfully");
</script>
</body>
</html>
