当前位置:编程学习 > html/css >>

HTML DOM事件

HTML 事件的例子:
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
 
[html]  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script type="text/javascript">  
  function changeColor()  
  {  
      document.body.style.backgroundColor = "lavender";  
  }  
  </script>  
 </head>  
  
 <body>  
  
   <input type="button" onclick="changeColor()" value="ChangeColor"/>  
    
 </body>  
</html>  
 
下面的例子在按钮被点击时改变 <p> 元素的文本:
 
[html] 
<html>  
<body>  
  
<p id="p1">Hello world!</p>  
  
<script>  
function ChangeText()  
{  
document.getElementById("p1").innerHTML="New text!";  
}  
</script>  
  
<input type="button" onclick="ChangeText()" value="Change text">  
  
</body>  
</html>  
 
 
onload 和 onunload 事件
当用户进入或离开页面时,会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
[html]  
<!DOCTYPE html>  
<html>  
<body onload="checkCookies()">  
  
<script>  
function checkCookies()  
{  
if (navigator.cookieEnabled==true)  
    {  
    alert("Cookies are enabled")  
    }  
else  
    {  
    alert("Cookies are not enabled")  
    }  
}  
</script>  
  
<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>  
</body>  
</html>  
onchange 事件
onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时,将调用 upperCase() 函数。
 
 
[html]  
<!DOCTYPE html>  
<html>  
<head>  
<script>  
function myFunction()  
{  
var x=document.getElementById("fname");  
x.value=x.value.toUpperCase();  
}  
</script>  
</head>  
<body>  
  
请输入你的英文名:<input type="text" id="fname" onchange="myFunction()">  
<p>当你离开输入框时,被触发的函数会把你输入的文本转换为大写字母。</p>  
  
</body>  
</html>  
 
 
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
实例
[html]  
<!DOCTYPE html>  
<html>  
<body>  
  
<div   
onmouseover="mOver(this)"   
onmouseout="mOut(this)"   
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">  
Mouse Over Me  
</div>  
  
<script>  
function mOver(obj)  
{  
obj.innerHTML="谢谢你"  
}  
  
function mOut(obj)  
{  
obj.innerHTML="把鼠标指针移动到上面"  
}  
</script>  
  
</body>  
</html>  
 
 
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件。
 
 
[html]  
<div   
onmousedown="mDown(this)"   
onmouseup="mUp(this)"   
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">  
点击这里  
</div>  
  
<script>  
function mDown(obj)  
{  
obj.style.backgroundColor="#1ec5e5";  
obj.innerHTML="松开鼠标"  
}  
  
function mUp(obj)  
{  
obj.style.backgroundColor="#D94A38";  
obj.innerHTML="谢谢你"  
}  
</script>  
  
</body>  
</html>  
 
 
 
补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,