0.前言
有一段時間沒有寫博客，因?yàn)樽罱鼘?shí)在是太忙了，正好今天就順著js學(xué)習(xí)的順序繼續(xù)講一個常用事件——鼠標(biāo)事件。
1.焦點(diǎn)事件
在學(xué)習(xí)鼠標(biāo)事件之前，我們先來了解一下什么是焦點(diǎn)事件朱灿？在JavaScript的耳朵——事件函數(shù)中的圖片昧识，列舉了一些常用的鼠標(biāo)事件。我們用代碼說一下焦點(diǎn)事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦點(diǎn)事件</title>
</head>
<body>
<input type="text" name="in" id="put">
<script type="text/javascript">
var jsInput = document.getElementById("put");
jsInput.addEventListener("focus", function(){
console.log("聚焦");
}, false);
jsInput.addEventListener("blur", function(){
console.log("離焦");
}, false);
</script>
</body>
</html>
當(dāng)我們點(diǎn)擊輸入框時盗扒，實(shí)現(xiàn)了聚焦（focuc）跪楞，當(dāng)鼠標(biāo)離開輸入框時，實(shí)現(xiàn)了離焦（blur）侣灶。就是這么簡單甸祭，這有啥難的！Ｈ煊啊池户！
2.鼠標(biāo)事件——單擊與雙擊
廢話不多說，上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)事件-單擊與雙擊</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red"></div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
//單擊
jsDiv.addEventListener("click", funcOnceClick, false);
function funcOnceClick() {
console.log("單擊");
}
//雙擊
jsDiv.addEventListener("dblclick", funcDblClick, false);
function funcDblClick() {
console.log("雙擊");
}
</script>
</body>
</html>
運(yùn)行效果：
![Uploading 捕獲_324394.PNG . . .]
我們發(fā)線當(dāng)點(diǎn)擊紅色方塊時凡怎，控制臺正常打印“單擊”校焦，但是點(diǎn)擊雙擊時，返現(xiàn)多打印兩次單擊统倒，這是為什么呢寨典？因?yàn)槲覀冊陔p擊時，實(shí)際上是進(jìn)行了兩次單擊房匆，所以會出現(xiàn)兩次單機(jī)的效果耸成，然后在打印出雙擊。那么如何解決呢浴鸿？首先我們應(yīng)該定義一個定時器井氢，設(shè)置時間在這個事件內(nèi)完成雙擊的話，就打印出雙擊岳链，超出這個時間毙沾，就顯示單擊,首先設(shè)置一個定時器作為全局變量，再在單擊中添加定時器宠页，注意要用延時定時器——setTimeout：
//單擊
jsDiv.addEventListener("click", funcOnceClick, false);
function funcOnceClick() {
timer = setTimeout(function(){
console.log("單擊");
}, 300);
}
//雙擊
jsDiv.addEventListener("dblclick", funcDblClick, false);
function funcDblClick() {
console.log("雙擊");
}
此時在看運(yùn)行效果：
發(fā)現(xiàn)先單擊效果沒出錯左胞，但是書記效果是雙擊打印出來了寇仓，但是又出現(xiàn)了兩次單擊，看來Bug還是沒改出來啊烤宙，原因和上面類似遍烦，當(dāng)我們點(diǎn)擊單擊是創(chuàng)建了定時器，但是在雙擊時沒有清除定時器躺枕，造成單擊時造成的后果還在繼續(xù)服猪，因此我們需要清除定時器，所以在雙擊中清除單擊所生成的定時器：
//雙擊
jsDiv.addEventListener("dblclick", funcDblClick, false);
function funcDblClick() {
clearTimeout(timer);
console.log("雙擊");
}
但是又發(fā)現(xiàn)雙擊之后只出現(xiàn)了一次單擊拐云，只是因?yàn)槲颐粗磺宄穗p擊造成的兩次單擊后果的其中一次罢猪，還差一次，那么就需要在單擊中再清理一次即可：
jsDiv.addEventListener("click", funcOnceClick, false);
function funcOnceClick() {
clearTimeout(timer);
timer = setTimeout(function(){
console.log("單擊");
}, 300);
}
bug完美解決２娲瘛Ｉ排痢！薇缅！不過這個不常用危彩，誰會沒事在一個按鈕上即實(shí)現(xiàn)單擊，又實(shí)現(xiàn)雙擊呢泳桦，了解一些就行了汤徽。
3.鼠標(biāo)事件-mouseover、mouserout灸撰、mousedown谒府、mouseup、mousemove
之一部分比較簡單浮毯，直接上代碼自己就能看懂狱掂，里面有詳細(xì)注釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)事件-mouseover、mouserout亲轨、mousedown趋惨、mouseup、mousemove</title>
</head>
<body>
<div id="box" style="width: 200px;height: 200px;background-color: red"></div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
//1惦蚊、當(dāng)鼠標(biāo)進(jìn)入小方塊中時器虾，顏色變?yōu)榫G色
//2、當(dāng)鼠標(biāo)移出小方塊時蹦锋，顏色恢復(fù)紅色
//3兆沙、當(dāng)鼠標(biāo)在小方塊中按下時，小方塊寬度變?yōu)樵瓉淼?倍
//4莉掂、當(dāng)鼠標(biāo)在小方塊中抬起時葛圃，小方塊寬度恢復(fù)原狀
//1
jsDiv.onmouseover = function() {
this.style.backgroundColor = "green";
// jsDiv.style.backgroundColor = "green";
};
//2
jsDiv.onmouseout = function() {
this.style.backgroundColor = "red";
};
//3
jsDiv.onmousedown = function() {
this.style.width = this.offsetWidth * 2 + "px";
};
//4
jsDiv.onmouseup = function() {
this.style.width = this.offsetWidth / 2 + "px";
};
//mousemove：鼠標(biāo)移動事件
//鼠標(biāo)移動就會觸發(fā)
document.onmousemove = function() {
console.log("鼠標(biāo)移動");
};
</script>
</body>
</html>
4.鼠標(biāo)事件的event對象
在編譯器中輸入如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)事件的event對象</title>
</head>
<body>
<div id="box" style="width: 300px; height: 300px;background-color: red;position: absolute;left: 200px;top: 200px"><span>Hello world
</span></div>
<script type="text/javascript">
/**
* 觸發(fā)事件即可得到一個該事件的對象，該對象包含了這個事件的所有信息
*/
var jsDiv = document.getElementById("box");
document.onclick = function(e) {
// IE
var evt = e || window.event;
console.log(evt);
};
</script>
</body>
</html>
點(diǎn)擊效果，控制臺打印的信息：
劃紅線的部分是必須要知道的屬性：
screenX:鼠標(biāo)位置相對于用戶屏幕水平偏移量库正，而screenY也就是垂直方向的曲楚，此時的參照點(diǎn)也就是原點(diǎn)是屏幕的左上角。
clientX:跟screenX相比就是將參照點(diǎn)改成了瀏覽器內(nèi)容區(qū)域的左上角褥符，該參照點(diǎn)會隨之滾動條的移動而移動龙誊。
pageX：參照點(diǎn)也是瀏覽器內(nèi)容區(qū)域的左上角，但它不會隨著滾動條而變動
三者具體關(guān)系
因此：
console.log(evt.clientX, evt.clientY);
console.log(evt.pageX, evt.pageY);
console.log(evt.screenX, evt.screenY);
console.log(evt.button);
5.總結(jié)
各位大哥大姐喷楣，誰會在簡書中插入gif圖片趟大，教我一下唄，不然每次都是插入靜態(tài)圖片铣焊，好麻煩吶Ｑ沸唷！曲伊！
