对事件作出反应
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
在本例中，当用户点击时，会改变 <h1> 元素的内容：
1、
例子1：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1 onclick="this.innerHTML='hello!'">请点击这段文本！</h1> 6 7 </body> 8 </html>
例子1改进：用函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function changetext(id) 6 { 7 id.innerHTML="hello!"; 8 } 9 </script> 10 </head> 11 <body> 12 13 <h1 onclick="changetext(this)">请点击这段文本！</h1> 14 15 </body> 16 </html>
2、 button 元素分配 onclick 事件：
例子2：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p>点击按钮来执行 <b>displayDate()</b> 函数。</p> 6 7 <button onclick="displayDate()">试一试</button> 8 9 <script> 10 function displayDate() 11 { 12 document.getElementById("demo").innerHTML=Date(); 13 } 14 </script> 15 16 <p id="demo"></p> 17 18 </body> 19 </html>
例子2：//
名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
当按钮被点击时，将执行函数。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 </head> 5 <body> 6 7 <p>点击按钮来执行 <b>displayDate()</b> 函数。</p> 8 9 <button id="myBtn">试一试</button> 10 11 <script> 12 document.getElementById("myBtn").onclick=function(){displayDate()}; 13 function displayDate() 14 { 15 document.getElementById("demo").innerHTML=Date(); 16 } 17 </script> 18 19 <p id="demo"></p> 20 21 </body> 22 </html>
3、onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
1 <!DOCTYPE html> 2 <html> 3 <body onload="checkCookies()"> 4 5 <script> 6 function checkCookies() 7 { 8 if (navigator.cookieEnabled==true) 9 { 10 alert("Cookies are enabled") 11 } 12 else 13 { 14 alert("Cookies are not enabled") 15 } 16 } 17 </script> 18 19 <p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p> 20 </body> 21 </html>
4、onchange 事件
onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function myFunction() 6 { 7 var x=document.getElementById("fname"); 8 x.value=x.value.toUpperCase(); 9 } 10 </script> 11 </head> 12 <body> 13 14 请输入你的英文名：<input type="text" id="fname" onchange="myFunction()"> 15 <p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p> 16 17 </body> 18 </html>
5、onmouseover 和 onmouseout 事件
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div 6 onmouseover="mOver(this)" 7 onmouseout="mOut(this)" 8 style="background-color:#D94A38;200px;height:50px;padding-top:25px;text-align:center;"> 9 Mouse Over Me 10 </div> 11 12 <script> 13 function mOver(obj) 14 { 15 obj.innerHTML="谢谢你" 16 } 17 18 function mOut(obj) 19 { 20 obj.innerHTML="把鼠标指针移动到上面" 21 } 22 </script> 23 24 </body> 25 </html>
6、onmousedown、onmouseup 以及 onclick 事件
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div 6 onmousedown="mDown(this)" 7 onmouseup="mUp(this)" 8 style="background-color:#D94A38;200px;height:50px;padding-top:25px;text-align:center;"> 9 点击这里 10 </div> 11 12 <script> 13 function mDown(obj) 14 { 15 obj.style.backgroundColor="#1ec5e5"; 16 obj.innerHTML="松开鼠标" 17 } 18 19 function mUp(obj) 20 { 21 obj.style.backgroundColor="#D94A38"; 22 obj.innerHTML="谢谢你" 23 } 24 </script> 25 26 </body> 27 </html>