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 | 当提交表单时触发此事件 |
<!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>
<!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>
<!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>
<!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>
<!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>
本文链接:http://task.lmcjl.com/news/16014.html