补充事件(滚轮事件&&键盘事件)

滚轮事件

滚轮事件(鼠标滚轮发生滚动的时候做一些事情)

<style>
		*{
			margin:0;
			padding:0;
		}
		#box{
			width:200px;
			height:200px;
			background-color: pink;
		}
</style>
	<div id="box"></div>

那么如何监听，鼠标滚轮在这个盒子上滚动了呢？？？

onmousewheel鼠标滚动事件 (只能在IE+chrome上使用)

var oBox = document.getElementById('box');
	oBox.onmousewheel = function(){//DOM0级事件
	//当鼠标滚轮在oBox上滚动时 会触发事件处理函数
		console.log('鼠标滚动，滚动了')
    };//onmousewheel鼠标滚动事件

鼠标滚轮，滚轮了12会回

那如何通过，DOM2级事件，设置鼠标滚轮滚动的呢

var oBox = document.getElementById('box');
		oBox.addEventListener('mousewheel',function(){
			console.log('鼠标滚动，滚动了');
		},false)//通过DOM2级事件设置滚轮滚动事件

鼠标滚轮，滚轮了5回

onmousewheel鼠标滚轮事件：鼠标滚轮在元素上滚动时触发(只能在IE+chrome上使用)

那么如何在火狐浏览器上面，监听到鼠标滚轮事件呢？？

DOMMouseScroll 鼠标滚轮在元素上滚动时触发 （只能在firefox上使用）

var oBox = document.getElementById('box');
		oBox.addEventListener('DOMMouseScroll',function(){
			console.log('鼠标滚动，滚动了')
		},false)//DOM2级事件
		//DOMMouseScroll鼠标滚轮在元素上滚动时触发

鼠标滚轮，滚轮了29回

那么如何如果DOM0级事件，在火狐浏览器上设置鼠标滚轮事件呢？？

var oBox = document.getElementById('box');
		oBox.DOMMouseScroll = function(){
			console.log('鼠标滚动，滚动了');
		};

在火狐浏览器上无法，通过DOM0级事件设置鼠标滚轮事件

那么如果在IE低版本浏览器上面，监听到鼠标滚轮事件呢？？

var oBox = document.getElementById('box');
		oBox.attachEvent('onmousewheel',function(){
			console.log('鼠标滚动，滚动了');
		},false)

鼠标滚轮，滚轮了3回

在谷歌和IE上，监听鼠标滚轮事件方法是一致的，没有区别。

鼠标滚动是分，往前滚动和往后滚动，那么如果区分呢？？

在谷歌和IE浏览器上鼠标滚轮滚动的角度

e.wheelDelta判断鼠标滚轮滚动的角度(在谷歌和IE浏览器上能使用)

var oBox = document.getElementById('box');
		oBox.addEventListener('mousewheel',function(e){
			console.log(e.wheelDelta);
		},false)

鼠标滚动往前滚动是正值(150)，往后滚动是负值(-150)

在火狐浏览器上鼠标滚轮滚动的角度

e.detail判断鼠标滚轮滚动的角度(在火狐浏览器上能使用)

var oBox = document.getElementById('box');
		oBox.addEventListener('DOMMouseScroll',function(e){
			console.log(e.detail);
		},false)

鼠标滚动往前滚动是负值(-3)，往后滚动是正值(3)

总结

谷歌:判断鼠标滚轮的方向

• e.wheelDelta 输出的结果：120的倍数 - 向前
• e.wheelDelta 输出的结果：-120的倍数 - 向后

火狐:判断鼠标滚轮的方向

• e.detail 输出的结果： -3的倍数 - 向前
• e.detail 输出的结果： 3 的倍数 - 向后

写一个兼容函数，兼容谷歌、火狐和IE浏览器的鼠标滚轮事件

   var oBox = document.getElementById('box');
  // 这个函数可以兼容 谷歌 火狐 IE 浏览器的鼠标滚轮事件
	    function mousewheel(dom,callBack){//callBack回调函数传进来一把就用这个形参名
	    	var type = 'mousewheel';//在谷歌浏览器应当绑定的事件名字

	    	// 在谷歌中你能在加DOM0级事件和DOM2级事件
	    	// 在火狐中你只能添加DOM2级事件

	    	// 在谷歌中oBox.onmousewheel（在还没有赋事件的时候）他是null 空对象（事件也是对象）

	    	// 在火狐中oBox.onmousewheel(在还没有赋事件的时候)他是undefined 未定义的值

	    	if (dom.onmousewheel===undefined) {//火狐浏览器在条件DOM2级事件的时候一定要加上on
	    		/*
                  null===null-->true

                  undefined===undefined-->true 火狐浏览器走进来

                  undefined===null-->false

                  null==undefined-->true那么谷歌浏览器也能走进来
	    		*/
	    		type = 'DOMMouseScroll';//火狐浏览器中的事件名
	    	};

	    	if (dom.addEventListener) {//如果是谷歌和火狐
	    		dom.addEventListener(type,callBack);//type可以区分你是谷歌函数火狐
	    	}else {//如果是IE的低版本
	    		dom.attachEvent('on'+type,function(){
	    			callBack.call(dom);
	    			//解决方法添加一个匿名的事件处理函数，
	    			//然后里面执行你要执行的函数然后在通过call修改内部的this执行
	    		});//在IE低版本浏览器添加对应的事件名字是要加上on的 
	    		//IE低版本的内部事件处理函数this执行window
	    	}
	    };

    /*执行mousewheel函数*/
    mousewheel(oBox,function(){
        console.log(this);
        console.log('鼠标滚轮滚动了')
    })

键盘事件

onkeydown当敲击键盘上的任意键时触发对应的事件处理函数

    document.onkeydown = function(){
    	console.log('onkeydown')
    }

onkeypress当敲击键盘上的非功能键时触发对应的事件处理函数

    document.onkeypress = function(e){
    	console.log('onkeypress')
    	console.log(e)
    	//which：存储了键盘键值表的编码
    }

   which存储按住某个键的编码(一下是常用的)
   w 119  上
   s 115  下
   a 97   左
   d 100  右

onkeyup当按住键盘任意键抬起的时候触发事件处理函数

 document.onkeyup = function(){
    console.log('onkeyup')
 }

• keydown 当键盘（任意键）按下时触发对应的事件处理函数
• keypress 当键盘（非功能键）按下时触发对应的事件处理函数
• keyup 当键盘（任意键）抬起时触发对应的事件处理函数

按住键盘(WSAD)键让小圆球移动

    var oBox = document.getElementById('box'); 
    document.onkeypress = function(e){
    	var which = e.which;
    	//w 119 , a 97 , s 115, d 100
    	switch(which){
    		case 119 ://w
    		     oBox.style.top = oBox.offsetTop - 10 + 'px';
    		break;
    		case 115 ://s
    		     oBox.style.top = oBox.offsetTop + 10 + 'px';
    		break;
    		case 97 ://a
    		     oBox.style.left = oBox.offsetLeft - 10 + 'px';
    		break;
    		case 100 ://d
    		     oBox.style.left = oBox.offsetLeft + 10 + 'px';
    		break;d
    	}
    }