1.学习目标
掌握DOM事件
2.学习内容
HTML DOM 允许我们通过触发事件来执行代码,比如以下事件:
元素被点击、页面加载完成、输入框被修改……
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
2.1 对事件做出反应
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
onclick=JavaScript
HTML 事件的例子:
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
例1:
当用户在 < h1> 元素上点击时,会改变其内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
运行前:
运行后:
例2:
本例从事件处理器调用一个函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
2.2 HTML 事件属性
如需向 HTML 元素分配 事件,您可以使用事件属性。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
运行结果:
在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。
2.3 使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件:
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
运行结果:
在上面的例子中,名为 displayDate 的函数被分配给 id=“myBtn” 的 HTML 元素。
按钮点击时Javascript函数将会被执行。
3.练习
延时提示框
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延迟提示框</title>
<style>
div{
float:left;
margin:10px;}
#div1{
width:100px;
height:100px;
background:#0F3;}
#div2{
width:400px;
height:400px;
background:#900;
display:none;}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var timer=null;
/* div1.οnmοuseοver=function(){
clearTimeout(timer);
div2.style.display='block';
};
div1.οnmοuseοut=function(){
timer=setTimeout(function(){
div2.style.display='none';},500);
};
div2.οnmοuseοver=function(){
//div2.style.display='block';
clearTimeout(timer);
};
div2.οnmοuseοut=function(){
timer=setTimeout(function(){
div2.style.display='none';},500);
};
*/
//将以上代码合并
div1.onmouseout=div2.onmouseout=function(){
timer=setTimeout(function(){
div2.style.display='none';},500);
};
div1.onmouseover=div2.onmouseover=function(){
clearTimeout(timer);
div2.style.display='block';
};
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
运行结果:
无缝滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#div4 {
height: 178px;
width: 798px;
/*算上边框长宽*/
background-color: #D3D3D3;
color: #ADD8E6;
border: solid 1px black;
overflow: hidden;
}
ul{
position: absolute;
margin-left: 0;
}
li {
list-style: none;
height: 100px;
width: 60px;
background: #F3F3F3;
font-size: 50px;
font-weight: 500;
margin-top: 30px;
text-align: center;
line-height: 100px;
float: left;
color: #FFD700;
border-right: solid 40px red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="div4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
var d = document.getElementById("div4");
var oUl = d.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.style.left=0+"px";
d.onclick = function() {
var timer = null;
timer = setInterval("move()", 30);
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth;
}
function move() {
oUl.style.left=parseInt(oUl.style.left)+3+"px";
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=0;
}
else if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
}
</script>
</body>
</html>
运行结果: