0.前言
有一段时间没有写博客，因为最近实在是太忙了，正好今天就顺着js学习的顺序继续讲一个常用事件——鼠标事件。
1.焦点事件
在学习鼠标事件之前，我们先来了解一下什么是焦点事件？在JavaScript的耳朵——事件函数中的图片，列举了一些常用的鼠标事件。我们用代码说一下焦点事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点事件</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>
当我们点击输入框时，实现了聚焦（focuc），当鼠标离开输入框时，实现了离焦（blur）。就是这么简单，这有啥难的！！！
2.鼠标事件——单击与双击
废话不多说，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件-单击与双击</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>
运行效果：
![Uploading 捕获_324394.PNG . . .]
我们发线当点击红色方块时，控制台正常打印“单击”，但是点击双击时，返现多打印两次单击，这是为什么呢？因为我们在双击时，实际上是进行了两次单击，所以会出现两次单机的效果，然后在打印出双击。那么如何解决呢？首先我们应该定义一个定时器，设置时间在这个事件内完成双击的话，就打印出双击，超出这个时间，就显示单击,首先设置一个定时器作为全局变量，再在单击中添加定时器，注意要用延时定时器——setTimeout：
//单击
jsDiv.addEventListener("click", funcOnceClick, false);
function funcOnceClick() {
timer = setTimeout(function(){
console.log("单击");
}, 300);
}
//双击
jsDiv.addEventListener("dblclick", funcDblClick, false);
function funcDblClick() {
console.log("双击");
}
此时在看运行效果：
捕获.PNG
发现先单击效果没出错，但是书记效果是双击打印出来了，但是又出现了两次单击，看来Bug还是没改出来啊，原因和上面类似，当我们点击单击是创建了定时器，但是在双击时没有清除定时器，造成单击时造成的后果还在继续，因此我们需要清除定时器，所以在双击中清除单击所生成的定时器：
//双击
jsDiv.addEventListener("dblclick", funcDblClick, false);
function funcDblClick() {
clearTimeout(timer);
console.log("双击");
}
捕获.PNG
但是又发现双击之后只出现了一次单击，只是因为我么只清除了双击造成的两次单击后果的其中一次，还差一次，那么就需要在单击中再清理一次即可：
jsDiv.addEventListener("click", funcOnceClick, false);
function funcOnceClick() {
clearTimeout(timer);
timer = setTimeout(function(){
console.log("单击");
}, 300);
}
捕获.PNG
bug完美解决！！！！不过这个不常用，谁会没事在一个按钮上即实现单击，又实现双击呢，了解一些就行了。
3.鼠标事件-mouseover、mouserout、mousedown、mouseup、mousemove
之一部分比较简单，直接上代码自己就能看懂，里面有详细注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件-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、当鼠标进入小方块中时，颜色变为绿色
//2、当鼠标移出小方块时，颜色恢复红色
//3、当鼠标在小方块中按下时，小方块宽度变为原来的2倍
//4、当鼠标在小方块中抬起时，小方块宽度恢复原状
//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：鼠标移动事件
//鼠标移动就会触发
document.onmousemove = function() {
console.log("鼠标移动");
};
</script>
</body>
</html>
4.鼠标事件的event对象
在编译器中输入如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件的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">
/**
* 触发事件即可得到一个该事件的对象，该对象包含了这个事件的所有信息
*/
var jsDiv = document.getElementById("box");
document.onclick = function(e) {
// IE
var evt = e || window.event;
console.log(evt);
};
</script>
</body>
</html>
点击效果，控制台打印的信息：
捕获.PNG
捕获.PNG
划红线的部分是必须要知道的属性：
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动
捕获.PNG
三者具体关系
因此：
console.log(evt.clientX, evt.clientY);
console.log(evt.pageX, evt.pageY);
console.log(evt.screenX, evt.screenY);
console.log(evt.button);
捕获.PNG
5.总结
各位大哥大姐，谁会在简书中插入gif图片，教我一下呗，不然每次都是插入静态图片，好麻烦呐！！！
网友评论