文章目录
- 事件
- 事件的绑定
- 事件监听机制
- 常见事件
- 点击事件
- 焦点事件
- 加载事件
- 鼠标事件
- 键盘事件
- 选择和改变
- 表单事件
事件
- 概述：某些组件被执行了某些操作后，触发了某些代码的执行
事件的绑定
-
方法一：直接在 HTML 标签上，指定事件的属性，属性值就是 JavaScript 代码
<img src="" alt="资源正在加载" onclick="confirm('5+5=10对吗？')"> -
方法二：通过 JavaScript 获取到元素对象，指定事件的属性，设置一个函数
<img src="" alt="资源正在加载" id="light"> <script>var light = document.getElementById("light");light.onclick = function (){alert("点我干嘛");} </script>
事件监听机制
- 概述：某些组件被执行了某些操作后，触发了某些代码的执行
- 事件：某些操作，例如、单击、双击、键盘按下、鼠标移动等
- 事件源：组件，例如、按钮 文本输入框等
- 监听器：代码
- 注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码
常见事件
点击事件
| 关键字 | 作用 |
|---|---|
| onclick | 单击事件 |
| ondblclick | 双击事件 |
-
示例代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>点击事件</title><style>div{width: 80px;height: 80px;background-color: red;margin: 20px;padding: 40px;}</style> </head> <body><div id="div1"><p>单击变色中国</p></div><div id="div2"><p>双击隐藏郑州</p></div><script>var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.onclick = function (){div1.style.backgroundColor='orange';}div2.ondblclick = function (){div2.style.visibility='hidden';}</script> </body> </html>
焦点事件
| 关键字 | 作用 |
|---|---|
| onblur | 失去焦点（一般） |
| onfocus | 元素获得焦点 |
-
示例代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>事件</title> </head> <body><input type="text" id="username" placeholder="请输入姓名"><input type="button" id="btn" value="点我，让我消失"><script>var username = document.getElementById("username");var btn = document.getElementById("btn");// 失去焦点时，元素背景颜色变成 橙色username.onblur = function(){username.style.backgroundColor = "orange";}// 获取焦点时，让按钮消失btn.onfocus = function(){btn.style.visibility = "hidden";}</script> </body> </html>
加载事件
| 关键字 | 作用 |
|---|---|
| onload | 一张页面或一副图像完成加载 |
-
示例代码（自己去下载太阳和月亮的图片，替换自己的路径）
<!DOCTYPE html> <html> <head><title>图片自动变换示例</title><script>// 2秒后，执行此函数，切换照片setTimeout(function changeImage() {var image = document.getElementById('myImage');image.src = '../../img/moon.jpg'; // 替换成月亮的图片},2000);</script> </head> <body onload="changeImage()"><img id="myImage" src="../../img/sun.jpg" alt="太阳"> </body> </html>
鼠标事件
| 关键字 | 作用 |
|---|---|
| onmousedown | 鼠标按钮被按下（定义方法时，定义一个形参，接收event对象，event的button属性可以知道那个按钮点击了） |
| onmouseup | 鼠标按键松开 |
| onmousemove | 鼠标被移动 |
| onmouseover | 鼠标移动到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
-
示例代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>鼠标事件</title> </head> <body><input type="button" id="btn1" value="点我"><input type="button" id="btn2" value="点我"><input type="button" id="btn3" value="移动鼠标看看我的变化"><input type="button" id="btn4" value="将鼠标移动到我身上试试，移走再试试"><script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var btn3 = document.getElementById("btn3");var btn4 = document.getElementById("btn4");var btn5 = document.getElementById("btn5");// 鼠标按键按下btn1.onmousedown = function (event){if(event.button == 0){btn1.value = "鼠标左键踩到我了";}else if(event.button == 1){btn1.value = "鼠标滚轮踩到我了";}else if(event.button == 2){btn1.value = "鼠标右键踩到我了";}}// 鼠标按键松开btn2.onmouseup = function (){btn2.value = "别松开我啊";}// 鼠标移动btn3.onmousemove = function (){btn3.value = "鼠标移动了";btn3.style.backgroundColor = "yellow";}// 鼠标移动按钮上btn4.onmouseover = function (){btn4.style.backgroundColor = "red";}// 鼠标移动开按钮btn4.onmouseout = function (){btn4.style.backgroundColor = "";}</script> </body> </html>
键盘事件
| 关键字 | 作用 |
|---|---|
| onkeydown | 某个键盘按键被按下 |
| onkeyup | 某个键盘按键被松开 |
| onkeypress | 某个键盘按键被按下并松开 |
-
示例代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>键盘事件</title> </head> <body><p id="p1">输出那个按键被按下</p><p id="p2">输出那个按键被松开</p><p id="p3">那个按键被按下并松开</p><input type="text" id="btn1" placeholder="请按下键盘按键"><input type="text" id="btn2" placeholder="请按下键盘按键"><input type="text" id="btn3" placeholder="请按下键盘按键"><script>var p1 = document.getElementById("p1");var p2 = document.getElementById("p2");var p3 = document.getElementById("p3");var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var btn3 = document.getElementById("btn3");btn1.onkeydown = function (event){var key = event.keyCode;p1.innerHTML = "被按下的按键是："+key + "<br>";}btn2.onkeyup = function (event){var key = event.keyCode;p2.innerHTML = "被松开的按键是："+key + "<br>";}// 显示的是大写字母的 ASCII 码值btn3.onkeypress = function (event){var key = event.keyCode;p3.innerHTML = "按下又松开的按键是："+key + "<br>";}</script> </body> </html>
选择和改变
| 关键字 | 作用 |
|---|---|
| onchange | 域的内容被改变（可用作下拉列表） |
| onselect | 文本被选中 |
-
示例代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>选择和改变事件</title> </head> <body><!-- 下拉列表 --><select type="select" id="city"><option value="0">--请选择城市--</option><option value="1">北京</option><option value="2">上海</option><option value="3">深圳</option><option value="4">郑州</option></select><!-- 文本域 --><textarea id="myTextarea" style="width: 300px; height: 100px;">选择一些文本，你好，欢迎来到编程世界！我是小哼，我们一起共同进步。</textarea><script>var city = document.getElementById("city");var myTextarea = document.getElementById("myTextarea");// 下拉列表选中city.onchange = function (){// 获取下拉列表选择值var selectValue = city.value;// 进行判断if(selectValue == 1){alert("北京");}else if(selectValue == 2){alert("上海");}else if(selectValue == 3){alert("深圳");}else if(selectValue == 4){alert("郑州");}else{alert("不好意思，其他城市暂未开通");}}// 文本选中myTextarea.onselect = function (){// 获取被选择的文本var selectText = window.getSelection().toString();alert(selectText);}</script> </body> </html>
表单事件
| 关键字 | 作用 |
|---|---|
| onsubmit | 确认按钮被点击（可以阻止表单提交） |
| onreset | 重置按钮被点击 |
-
示例代码
<!DOCTYPE html> <html> <head><title>表单事件</title><meta charset="utf-8"><script>function handleSubmit() {// 阻止表单的默认提交行为event.preventDefault();// 获取表单中的输入值var username = document.getElementById("username").value;var password = document.getElementById("password").value;// 在控制台输出输入值alert('Username: ' + username);alert('Password: ' + password);}function handleReset() {// 重置表单后的操作alert('输入框已重置');}</script> </head> <body> <form onsubmit="handleSubmit()" onreset="handleReset()"><label for="username">用户名:</label><input type="text" id="username" name="username"><br><br><label for="password">密码:</label><input type="password" id="password" name="password"><br><br><input type="submit" value="提交"><input type="reset" value="重置"> </form> </body> </html>
![街机模拟游戏逆向工程(HACKROM)教程:[18]分析的思路](http://pic.xiahunao.cn/街机模拟游戏逆向工程(HACKROM)教程:[18]分析的思路)
)
)
