<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标按下时更换字体背景色，抬起时还原默认颜色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style> <script>
function downClick(){
console.log("onmousedown");
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="red";
}
function upClick(){
console.log("onmouseup");
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="blue";
}
function reClick(){
console.log("onclick");
var woaixuexi = document.getElementById("woaixuexi");
woaixuexi.style.background="green";
}
</script> </head>
<body>
<div id="woaixuexi" onmousedown="downClick();" onmouseup="upClick();" onclick="reClick();" class="xuexi"></div>
</body>
</html>
代码分析：
1、当onmousedown,onmouseup,onclick同时作用在一个元素节点上时，执行的顺序依次为onmousedown,onmouseup,onclick;
2、onmousedown：是在鼠标按下之后触发的事件；
onmouseup:鼠标抬起时触发的事件;
onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。）onclick = onmousedown + onmouseup;