本文通过实例详细介绍了DOM事件的使用方法，包括点击元素改变内容、鼠标悬停改变样式、鼠标按钮的按下与释放等功能，并展示了如何利用这些事件进行网页互动。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>DOM事件</title>
</head>
<bodyonload="mymessage()">
<!-- 1.点击元素改变内容 -->
<h1onclick="this.innerHTML='当你点击我一下!'">请点击该文本</h1>
<!-- <h3onclick="this.innerHTML'DL1'">JDCSK1</h3> -->
//<!-- 2.把鼠标移动上去 -->
<divonmouseover="mOver(this)" onmouseout="mOut(this)"style="background-color:pink;width: 200px; height: 200px;">把鼠标移动上去</div>
<!--3. 释放,按下鼠标按钮 -->
<divonmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;width: 200px; height: 200px;">请点击这里</div>
<!--4.按住鼠标不放可以点亮这盏灯！-->
<imgid="ress" onmousedown="cc(this)"onmouseup="dd(this)" src="./images/off.gif">
<p>一直按鼠标可以点亮这个灯</p>
<!-- 5. -->
<!-- <divid="onload="myname()"></div> -->
<!-- 6. -->
<inputtype="text" onfocus="myoppo(this)">
<p>字段获得焦点时，会触发改变背景颜色的函数。</p>
<!--7.把鼠标悬停在这里改变颜色 -->
<h2onmouseover="style.color='red'"onmouseout="style.color='blue'">把鼠标悬停在这里</h2>
<!--8点击按钮就可以执行-->
<p>点击按钮就可以执行<em>displayDate()</em> 函数</p>
<buttonid="git">点击这里</button>
<script>
//2.把鼠标移动上去 mOver mOut
function mOver(oppo){
oppo.innerHTML="哈哈哈"
}
function mOut(oppo){
oppo.innerHTML="把鼠标移动上去"
}
// 释放,按下鼠标按钮mDown mUp
functionmDown(name){
name.innerHTML="请释放鼠标"
name.style.backgroundColor="#f00";
}
function mUp(name){
name.innerHTML="请松开鼠标"
name.style.backgroundColor="blue";
}
// 4.按住鼠标不放可以点亮这盏灯！
function cc(){
document.getElementById('ress').src="./images/on.gif";
}
function dd(){
document.getElementById('ress').src="./images/off.gif";
}
// 这段消息由 onload 事件触发
function mymessage(){
alert ("这段消息由 onload 事件触发");
}
// 当输入字段获得焦点时，会触发改变背景颜色的函数。
function myoppo(a){
a.style.background="pink";
}
// 把鼠标悬停在这里
//
// 点击按钮就可以执行
document.getElementById("git").onclick=function(){
displayDate()
};
functiondisplayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<pid="demo"></p>
扫一扫
1088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
