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{
    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{
    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{
    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{
         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{
    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{
    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{
    100px;
    height:100px;
    background:red;
      position:absolute;
      top: 0;
      left: 0;
  }
    .btn{
         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{
    100px;
    height:100px;
    background:red;
      position:absolute;
      top: 0;
      left: 0;
  }
    .btn{
         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
      }
  }
}