js 响应事件 

 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>

 

posted @ 2017-10-11 11:33  enych  阅读(520)  评论(0)    收藏  举报