JavaScript：事件
js捕获某个动作而做出的反馈
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
1 窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
onload 当文档被载入时执行脚本
<body onload="test()"> <script> function test() { document.write("哈哈哈哈"); } </script> </body>
2 表单元素事件 (Form Element Events)
仅在表单元素中有效。
onblur 当元素失去焦点时执行脚本
onfocus 当元素获得焦点时执行脚本
<body> <script> function a() { 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 当鼠标指针悬停于某元素之上时执行脚本
<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>
4 键盘事件
onkeydown 按下去
onkeyup 弹上来
<script> window.onkeydown = function(){ // event：事件源（按键） // console.log( "按键编码："+event.keyCode ); if(event.keyCode == "13"){ // 回车键 alert("登录成功！"); } } window.onkeyup = function(){ console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发 } </script>
5 事件冒泡
创建两个div，一个大一些，一个小一些
<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>
先子，后父。事件的触发顺序*自内向外*，这就是事件冒泡；
6 事件捕获
还是刚才创建两个div，一个大一些，一个小一些
<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>
先父,后子。事件触发顺序变更为*自外向内*，这就是事件捕获；
