鼠标事件
聚焦事件
<input type="text" id="box1">
<script>
var box1 = document.getElementById("box1");
function Hello () {
alert("Hello,小潘");
}
box1.addEventListener("focus",Hello, false);
</script>
离焦事件
<input type="text" id="box1">
<script>
var box1 = document.getElementById("box1");
function Hello () {
alert("Hello,小潘");
}
box1.addEventListener("blur",Hello, false);
</script>
鼠标单击和双击
<div id="box1"></div>
<script>
var box1 = document.getElementById("box1");
function Hello () {
console.log('单击');
}
box1.addEventListener("click",Hello, false);
box1.addEventListener("dblclick", () => {
console.log('双击');
}, false);
</script>
这里会出现一个问题，如果只双击的话，会先执行两次单击事件再执行双击事件
下面提供一个解决办法
<div id="box1"></div>
<script>
var box1 = document.getElementById("box1");
var time;
box1.addEventListener("click", () => {
clearTimeout(time);
time = setTimeout( () => {//利用定时器延迟
console.log('单击');
},300);
}, false);
box1.addEventListener("dblclick", () => {
clearTimeout(time);//再定时器生效前将它去除
console.log('双击');
}, false);
</script>
鼠标的其他事件
<ul>
<li>鼠标进入变红色</li>
<li>鼠标离开变蓝色</li>
<li>鼠标按下字体放大两倍</li>
<li>鼠标抬起字体缩小两倍</li>
</ul>
<script>
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("mouseover" ,function() {//匿名函数this不存在
this.style.backgroundColor = 'red';
},false);
li[i].addEventListener("mouseout" ,function() {
this.style.backgroundColor = 'blue';
},false);
li[i].addEventListener("mousedown" ,function() {
this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize) * 2 +"px";
},false);
li[i].addEventListener("mouseup" ,function() {
this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize) / 2 +"px";
},false);
li[i].addEventListener("mouseover" ,function() {
},false);
document.addEventListener("mousemove" , function () {
console.log("鼠标在移动");
})
}
</script>
【注】如果鼠标按下后把鼠标移出再抬起，则字体放大后不会再缩小
鼠标事件对象
<script>
document.addEventListener("click", function(e) {//e为传入是事件
var event = e || window.event;//IE浏览器e不存在
console.log(event);
}, false);
</script>
部分属性如下：
| 属性/方法 | 说明 |
|---|---|
| clientx | 浏览器可视窗口水平方向的坐标 |
| clientY | 浏览器可视窗口垂直方向的坐标 |
| pageX | 页面中水平方向的坐标 |
| pageY | 页面中垂直方向的坐标 |
| screenX | 电脑屏幕水平方向的坐标 |
| screenY | 电脑屏幕垂直方向的坐标 |
| button | 0、左键 1滚轮键 2右键 |
键盘事件
<script>
document.addEventListener("keydown", function(e) {//e为传入是事件
var event = e || window.event;//IE浏览器e不存在
console.log(event);
}, false);
</script>
从输出可以看出，event是一个对象，里面有很多成员，可以根据成员里面的值来判断按下的键是什么