HTML DOM之二：事件

对事件作出反应

当事件发生时，可以执行 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;width: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;width: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>

 

posted on 2013-08-27 09:32  gogoy  阅读(238)  评论(0)  编辑  收藏  举报

导航