javascript鼠标及键盘事件总结及案例
一、鼠标事件
1、单击事件
box.onclick
2、双击事件(双击时也会触发单击)
box.ondblonclick
3、鼠标右键
box.oncontextmenu=function(){
console.log('右键事件');
//取消鼠标的默认事件
return false;
}
4、按下|移动|抬起|鼠标悬浮|鼠标移开|鼠标右键
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标抬起
onmouseover 鼠标悬浮
onmouserout 鼠标移开(从父集移至子集，触发out事件，紧接着触发子集的over事件，并可以冒泡给父集(触发父集的over))
oncontextmenu 鼠标右键
onmouseenter 鼠标悬浮()
onmouseleave 鼠标移开(leave默认子集是父集的一部分，所以从子集移到父集不会触发,enter事件也不会触发)
enter:父集enter 子集enter (不支持冒泡)
over:子集over 父集over(想当于子集冒泡给父集) (支持冒泡)
总结： 将父集和自己分开考虑盒子的悬浮离开事件，用over | out组合；
将子集纳入父集的考虑当中，只考虑父集的相应悬浮离开事件，采用 enter | leave组合；
单独考虑一个盒子的悬浮离开事件，都可以使用
二、js的盒模型
1、应用
<style>
.box{
width:100px;
height:100px;
background:red;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box')
var width=getComputedStyle(box,null).width;
console.log(width)
//转化成数字类型
console.log(+(width.slice(0,3)))
</script>
==>100px
2、数字字符转换
var a="1213124"
//转化成整型
a=+a//如果待单位会转化成NaN
a=parseInt(a)
//字符的切割
a.substr(0,3)==>123 //从0往后取3个单位
a.slice(0,2)==>12 //从0取到2，前取后不取
3、获取padding
<style>
.box{
width:100px;
height:100px;
background:red;
padding:20px;
position:absolute;
}
body{
position:relative;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box')
var width=getComputedStyle(box,null).width;
console.log(width)
//转化成数字类型
console.log(+(width.slice(0,3)))
var clientW=box.clientWidth
//获得padding和width的总和
console.log(box.clientWidth)
//获得盒子的总高度(padding+height)
console.log(box.clientHeight)
//padding+border+width
console.log(box.offsetWidth)
//padding+height+border
console.log(box.offsetHeight)
//匹配绝对定位的方向实现(获取与定位父集的距离)left top
console.log(box.offsetTop)
console.log(box.offsetLeft)
</script>
三、鼠标事件的拖拽案例
1.v1版本
<style>
.box{
width:100px;
height:100px;
background:red;
border: 10px solid black;
position:absolute;
}
</style>
<div class='box'></div>
<script>
var box=document.querySelector('.box');
box.onmousedown=function(){
console.log('按下');
box.onmousemove=function(ev){
console.log('移动');
var x=ev.clientX;
var y=ev.clientY;
box.style.left=x-10+'px';
box.style.top=y-10+'px';
}
};
box.onmouseup=function(){
console.log('取消移动');
box.onmousemove=null;
}
</script>
2、鼠标拖拽事件v2版本
<style>
.box{
width: 100px;
height: 100px;
border: 10px solid red;
background: black;
position:absolute;
top: 0;
left: 0;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.onmousedown=function (fa) {
console.log('按下');
var dX=fa.clientX-box.offsetLeft;
var dY=fa.clientY-box.offsetTop;
//将移动鼠标捕捉改成文档，是为了鼠标就算脱离box也不会停止移动
document.onmousemove=function (ev) {
console.log('移动');
var x=ev.clientX;
var y=ev.clientY;
box.style.left=x-dX+'px';
box.style.top=y-dY+'px';
}
};
box.onmouseup=function () {
console.log('移开');
//对鼠标移动事件删除
document.onmousemove=null;
}
</script>
四、键盘事件
1、键盘按下事件(键盘按下会一直触发事件)
<style>
.box{
width:100px;
height:100px;
background:red;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
document.onkeydown=function(ev){
// console.log(ev.keyCode);
console.log(ev.which)
}
</script>
2、键盘按下移动盒模型案例
<style>
.box{
width:100px;
height:100px;
background:red;
position:absolute;
top:0;
left:0;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
document.onkeydown=function(ev){
console.log(ev.keyCode);
switch (ev.keyCode){
case 37:box.style.left=box.offsetLeft-10+'px';break;
case 38:box.style.top=box.offsetTop-10+'px';break;
case 39:box.style.left=box.offsetLeft+10+'px';break;
case 40:box.style.top=box.offsetTop+10+'px';break;
}
}
</script>
四、javascript其他事件
1、onload(文档加载事件)
<script>
//将script标签写在标签前面使用
window.onload=function(){
var box=document.querySelector('.box')
console.log(box)
}
</script>
<div class='box'></div>
2、onscroll事件
<script>
//将script标签写在标签前面使用
window.onload=function(){
var box=document.querySelector('.box')
console.log(box)
}
window.onscroll=function(){
console.log(window.scrollY);
}
</script>
<div class='box'></div>
<br>*100
3、盒子显影与鼠标滚动事件的案例
1)滚动一直触发事件
<style>
.box{
width:100px;
height:100px;
background:red;
position:absolute;
top: 0;
left: 0;
}
.btn{
width: 50px;
height: 50px;
background: red;
display:none;
position: fixed;
top: 200px;
right: 100px;
}
</style>
<div class="box"></div>
<script>
//将script标签写在标签前面使用
window.onload=function(){
var box=document.querySelector('.box');
console.log(box);
}
window.onscroll=function(){
var btn=document.querySelector('.btn');
console.log(window.scrollY);
console.log("cc");
if (window.scrollY>700){
console.log("bb");
btn.style.display='block';
btn.style.background="black"
}
if (window.scrollY<=700){
btn.style.display='none';
}
}
</script>
<div class='box'></div>
<div class="btn"></div>
2）只触发一次
<style>
.box{
width:100px;
height:100px;
background:red;
position:absolute;
top: 0;
left: 0;
}
.btn{
width: 50px;
height: 50px;
background: red;
display:none;
position: fixed;
top: 200px;
right: 100px;
}
</style>
<div class="box"></div>
<script>
//将script标签写在标签前面使用
window.onload=function(){
var box=document.querySelector('.box');
console.log(box);
}
var isshow=false;
window.onscroll=function(){
var btn=document.querySelector('.btn');
console.log(window.scrollY);
// console.log("cc");
if (window.scrollY>700){
if (!isshow){
console.log("bb");
btn.style.display='none';
btn.style.background="black";
isshow=true;
}
}else {
if (isshow){
btn.style.display="block";
isshow=false
}
}
}
