<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标按下时更换字体背景色，抬起时还原默认颜色。</title> <style> .xuexi{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;