事件简单来说就是:用户的操作
【demo练习----鼠标移入移出时的效果】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移入移出时的效果</title>
<style>
#box1{
width:100px;
height:100px;
background-color:#096;
}
</style>
</head>
<body>
<input type="button" value="按钮" οnmοuseοver="box1.style.display='none';"οnmοuseοut="box1.style.display='block';"/>
<div id="box1">显示和隐藏这个div</div>
</body>
</html>
【写js的时候的步骤】
1.先可以把你想要的效果用文字表达一下
eg:当鼠标移入的时候让div隐藏,当鼠标移出的时候让div显示
2.div显示:就是把div的style(样式)的display(属性)变成block
div隐藏:就是把div的style(样式)的display(属性)变成none
3.把步骤2的语言用js表达出来
div显示:οnmοuseοut="box1.style.display='block';"
div隐藏: οnmοuseοver="box1.style.display='none';"
【遇到的问题】
1.兼容性问题:
在火狐下不兼容:div显示:οnmοuseοut="document.getElementById('box1').style.display='block';"
div隐藏:οnmοuseοver="document.getElementById('box1').style.display='none';"
2.单引号和双引号的选择要注意,不能写成οnmοuseοver="box1.style.display="none";"这样有两个双引号了