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;width: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>
