JavaScript 事件

对象状态的改变被称为事件。在HTML中，有各种事件代表用户或浏览器执行某些操作。当包含JS代码的HTML中，JS会对这些事件作出反应并允许执行。这个对事件作出反应的过程被称为 事件处理 。因此，JS通过 事件处理程序 处理HTML事件。

例如，当用户在浏览器上点击时，添加JS代码，该代码将执行事件上要执行的任务。

一些HTML事件及其事件处理程序如下：

鼠标事件

事件	事件处理程序	描述
点击	onclick	当鼠标点击一个元素时
鼠标悬停	onmouseover	当鼠标光标移动到元素上时
鼠标离开	onmouseout	当鼠标光标离开一个元素时
鼠标按下	onmousedown	当鼠标按下元素时
鼠标释放	onmouseup	当鼠标释放元素时
鼠标移动	onmousemove	当鼠标移动时

键盘事件

执行事件	事件处理程序	描述
Keydown & Keyup	onkeydown & onkeyup	当用户按下并释放按键时

表单事件

执行的事件	事件处理函数	描述
focus	onfocus	当用户将焦点放在元素上时
submit	onsubmit	当用户提交表单时
blur	onblur	当焦点离开表单元素时
change	onchange	当用户修改或更改表单元素的值时

窗口/文档事件

事件操作	事件处理程序	说明
加载	onload	当浏览器完成页面加载时
卸载	onunload	当访问者离开当前网页时，浏览器卸载它
调整大小	onresize	当访问者调整浏览器窗口大小时

让我们讨论一些事件和它们的处理程序的示例。

点击事件

<html>
<head> Javascript Events </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>

鼠标悬停事件

<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>

聚焦事件

<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>

键盘按下事件

<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>

加载事件

<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>