1. 窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。 onload 当文档被载入时执行脚本。
| <body onload="test()"> <script> function test() { document.write("哈哈哈哈"); } </script> </body> |
2. 表单元素事件 (Form Element Events)
仅在表单元素中有效。 onblur 当元素失去焦点时执行脚本 onfocus 当元素获得焦点时执行脚本。
| console.log("获得焦点==被激活"); } function b() { console.log("失去焦点"); } </script> <form action=""> <p>帐号：<input onfocus="a()" onblur="b()" /></p> <p>密码：<input /></p> </form> </body>
|
3. 鼠标事件 (Mouse Events)
onclick 当鼠标被单击时执行脚本 ondblclick 当鼠标被双击时执行脚本 onmouseout 当鼠标指针移出某元素时执行脚本 onmouseover 当鼠标指针悬停于某元素之上时执行脚本。
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head>
<style> img{ width: 30%; border: 5px solid white; } </style> <body>
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()"> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()"> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" >
<script> function dan(){ alert("点了一下"); }
function shuang(){ alert("连续快读点两下"); }
function shang(img){ img.style.border = "5px solid red"; } function xia(img){ img.style.border = "5px solid white"; }
</script> </body> </html> |
4. 键盘事件
onkeydown 按下去 onkeyup 弹上来。
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> window.onkeydown = function(){ // event：事件源（按键） // console.log( "按键编码："+event.keyCode ); if(event.keyCode == "13"){ alert("登录成功！"); } }
window.onkeyup = function(){ console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发 } </script> </body> </html> |
5. 事件冒泡
创建两个div，一个大一些，一个小一些
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <style> #father { width: 200px; height: 200px; background: black; padding: 10px; }
#child { width: 100px; height: 100px; background: greenyellow; } </style> <body> <div id="father"> <div id="child"></div> </div> <script> // 代码不重要，重要是知道这个事件发生，是正常现象
document.getElementById("father").addEventListener("click", function() { alert("父级元素的事件被触发：" + this.id); });
document.getElementById("child").addEventListener("click", function(e) { e.stopPropagation() //取消事件的冒泡机制 alert("子级元素的事件被触发：" + this.id); }); </script> </body> </html>
|
6.事件捕获
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <style> #father { width: 200px; height: 200px; background: black; padding: 10px; }
#child { width: 100px; height: 100px; background: greenyellow; } </style>
<body> <div id="father"> <div id="child"></div> </div>
<script> document.getElementById("father").addEventListener("click",function(){ alert("父级：" + this.id); },true); document.getElementById("child").addEventListener("click",function(){ alert("子级：" + this.id); },true); </script> </body> </html>
|
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
