@
事件
事件源
1.鼠标单击事件:onclick
2.鼠标双击事件:ondblclick
3.鼠标移入/离开(onmouseenter/onmouseleave)
事件源
1.鼠标单击事件:onclick
<body>
<p id="p1" onclick="fun()">单机事件测试</p>
</body>
<script type="text/javascript">
function fun(){
//获取指定元素
var p1 = document.getElementById("p1");
p1.innerText="我被单击了!"
p1.style.fontSize="90px";
p1.style.color="blue";
}
</script>
2.鼠标双击事件:ondblclick
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="div1" onclick="zoomout()" ondblclick="zoomin()"></div>
</body>
<script type="text/javascript">
function zoomout(){
var div1 = document.getElementById("div1");
div1.style.width="200px";
div1.style.height="200px";
div1.style.backgroundColor="red";
}
function zoomin(){
var div1 = document.getElementById("div1");
div1.style.height="300px";
div1.style.width="300px";
div1.style.backgroundColor="yellowgreen";
}
</script>
3.鼠标按下和抬起(onmousedown / onmouseup)
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div id="div1" onmousedown="zoomout()" onmouseup="zoomin()"></div>
</body>
<script type="text/javascript">
function zoomout() {
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
div1.style.backgroundColor="yellowgreen";
}
function zoomin() {
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.backgroundColor="black";
}
</script>
3.鼠标移入/离开(onmouseenter/onmouseleave)
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div id="div1" onmouseenter="zoomout()" onmouseleave="zoomin()"
onmousedown="zoomon" onmouseup="zomout"
onclick="zoomr()" ondblclick="zoomt()"></div>
</body>
<script type="text/javascript">
function zoomout() {
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.backgroundColor="red";
}
function zoomin() {
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
div1.style.backgroundColor="yellow";
}
function zoomon() {
var div1 = document.getElementById("div1");
div1.style.width = "300px";
div1.style.height = "300px";
div1.style.backgroundColor="green";
}
function zomout() {
var div1 = document.getElementById("div1");
div1.style.width = "400px";
div1.style.height = "400px";
div1.style.backgroundColor="blue";
}
function zoomr() {
var div1 = document.getElementById("div1");
div1.style.width = "500px";
div1.style.height = "500px";
div1.style.backgroundColor="purple";
}
function zoomt() {
var div1 = document.getElementById("div1");
div1.style.width = "600px";
div1.style.height = "600px";
div1.style.backgroundColor="seagreen";
}
</script>