1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <style> 8 9 </style> 10 <script type="text/javascript"> 11 function sclick() { //函数名不能是关键字 12 alert("ceshi"); 13 } 14 </script> 15 <script type="text/javascript"> 16 window.onload = function () { //匿名函数 17 alert("页面已加载"); 18 } 19 </script> 20 </head> 21 <body> 22 <script> 23 //在html中调用事件处理器 24 </script> 25 <input type="button" value="测试" onclick="sclick()" /> 26 27 <input type="button" value="测试1" id="click" /> 28 <script type="text/javascript"> 29 var btn = document.getElementById("click"); //通过元素ID获取元素对应的节点对象 30 //在javascript中调用事件处理器 31 btn.onclick = function () { //匿名函数 32 alert("ceshi1"); 33 } 34 </script> 35 36 <img id="logo" style="background-color:red;100px;height:100px;"/> 37 <script type="text/javascript"> 38 //获取元素前提是dom加载完成 39 document.getElementById("logo").onmouseover = function () { //鼠标移动到对象上 40 this.style.backgroundColor = "pink"; 41 } 42 document.getElementById("logo").onmouseout = function () { //鼠标离开对象上 43 this.style.backgroundColor = "red"; 44 } 45 </script> 46 <script type="text/javascript"> 47 //删除事件 48 document.getElementById("logo").onmouseout = null; 49 //null值会覆盖以前赋予事件处理器的任何内容,从而删除事件处理器 50 </script> 51 52 <a href="http://www.baidu.com" id="baidu">超链接</a> 53 <script type="text/javascript"> 54 //默认操作 55 document.getElementById("baidu").onclick = function () { 56 this.href = "https://www.google.com.hk/";//this代表这个对象 或代表<a>标记 57 } 58 </script> 59 <script type="text/javascript"> 60 //禁止默认操作 61 document.getElementById("baidu").onclick = function () { 62 return false; //点击超链接 就不会跳转; 63 } 64 </script> 65 66 <form id="form1"> 67 <input type="text" id="name"/> 68 <input type="submit" /> 69 </form> 70 <script type="text/javascript"> 71 document.getElementById("form1").onsubmit = function () { 72 var B1 = true; 73 var txtName = document.getElementById("name").value; 74 if(txtName==""){ 75 alert("请输入姓名"); 76 B1 = false; 77 } 78 return B1; 79 } 80 </script> 81 </body> 82 </html>