JavaScript事件处理
精华
小牛编辑
124浏览
2023-03-14
JS 事件(event)是当用户与网页进行交互时发生的事情,例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时,您可以使用 JavaScript 中的事件处理程序(也可称为事件监听器)来检测并执行某些特定的程序。
一般情况下事件的名称都是以单词
以 onclick 属性为例,通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件(即在该元素上单击鼠标左键时触发的事件),示例代码如下:
一般情况下事件的名称都是以单词
on
开头的,例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件:
事件 | 描述 | |
---|---|---|
鼠标、键盘事件 | onclick | 点击鼠标时触发此事件 |
ondblclick | 双击鼠标时触发此事件 | |
onmousedown | 按下鼠标时触发此事件 | |
onmouseup | 鼠标按下后又松开时触发此事件 | |
onmouseover | 当鼠标移动到某个元素上方时触发此事件 | |
onmousemove | 移动鼠标时触发此事件 | |
onmouseout | 当鼠标离开某个元素范围时触发此事件 | |
onkeypress | 当按下并松开键盘上的某个键时触发此事件 | |
onkeydown | 当按下键盘上的某个按键时触发此事件 | |
onkeyup | 当放开键盘上的某个按键时触发此事件 | |
窗口事件 | onabort | 图片在下载过程中被用户中断时触发此事件 |
onbeforeunload | 当前页面的内容将要被改变时触发此事件 | |
onerror | 出现错误时触发此事件 | |
onload | 页面内容加载完成时触发此事件 | |
onmove | 当移动浏览器的窗口时触发此事件 | |
onresize | 当改变浏览器的窗口大小时触发此事件 | |
onscroll | 当滚动浏览器的滚动条时触发此事件 | |
onstop | 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件 | |
oncontextmenu | 当弹出右键上下文菜单时触发此事件 | |
onunload | 改变当前页面时触发此事件 | |
表单事件 | onblur | 当前元素失去焦点时触发此事件 |
onchange | 当前元素失去焦点并且元素的内容发生改变时触发此事件 | |
onfocus | 当某个元素获得焦点时触发此事件 | |
onreset | 当点击表单中的重置按钮时触发此事件 | |
onsubmit | 当提交表单时触发此事件 |
事件绑定
事件只有与 HTML 元素绑定之后才能被触发,为 HTML 元素绑定事件处理程序的方法由很多,最简单的就是通过 HTML 事件属性来直接绑定事件处理程序,例如 onclick、onmouseover、onmouseout 等属性。以 onclick 属性为例,通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件(即在该元素上单击鼠标左键时触发的事件),示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <button type="button" onclick="myBtn()">按钮</button> <script type="text/javascript"> function myBtn(){ alert("Hello World!"); } </script> </body> </html>除了上述方法外,我们也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序,如下例所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <button type="button" id="myBtn">按钮</button> <script> function sayHello() { alert('Hello World!'); } document.getElementById("myBtn").onclick = sayHello; </script> </body> </html>
JS 事件示例
一般情况下,事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件,另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。1) onmouseover 事件
onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件,示例代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <button type="button" onmouseover="alert('您的鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br> <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a> <script> function myEvent() { alert('您的鼠标已经移动到了该链接上'); } </script> </body> </html>
2) onmouseout 事件
onmouseout 事件与 onmouseover 事件正好相反,onmouseout 事件会在鼠标从元素上离开时触发,示例代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div> <script> function myEvent() { alert('您的鼠标已经离开指定元素'); } document.getElementById("myBox").onmouseout = myEvent; </script> </body> </html>
3) onkeydown 事件
onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件,示例代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <input type="text" onkeydown="myEvent()"> <script> function myEvent() { alert("您按下了键盘上的某个按钮"); } </script> </body> </html>
4) onkeyup 事件
onkeyup 事件是指当用户按下键盘上的某个按键并将其释放(即按下并松开某个按键)时触发的事件,示例代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <input type="text" onkeyup="myEvent()"> <script> function myEvent() { alert("您按下了键盘上的某个按钮,并将其释放了"); } </script> </body> </html>