js事件的获取

获取元素样式属性

Method	DES
clientWidth	获取元素宽度
clientHeight	获取元素高度（内容+内边距）
document.body.clientWidth	获取body宽度
document.body.clientHeight	获取body高度
offsetWidth	包括边框宽度
offsetHeight	包括边框高度（内容+内边距+边框）
offsetLeft	距离左边距离
offsetTop	距离右边距离，当前元素距离定位父级的

事件对象

作用：捕获用户的操作行为

事件对象的获取：

1、全局event对象--IE9+,chrome

2、形参接收方式--

document.onclick = function(m){
        m = m || event;//兼容ie,chrome及IE8-
        alert(m);
    }

//拖拽
var box = document.getElementById("box");//获取box元素ID
    box.onmousedown = function(m){
        m = m || event;//兼容浏览器
        var initX = m.clientX,//定义鼠标初始位置
            initY = m.clientY,

            initLeft = box.offsetLeft,//box初始位置
            initTop = box.offsetTop;
            document.onmousemove = function(m){
                m = m || event;
                var moveX = m.clientX,//鼠标拖拽位置
                    moveY = m.clientY,

                    changeX = moveX - initX,//拖拽改变距离
                    changeY = moveY - initY;

                    console.log(changeX,changeY);//打印出改变距离

                box.style.left = initLeft + changeX + "px";//box最终显示位置
                box.style.top = initTop + changeY +"px";
            }
    }
    document.onmouseup = function(){//当鼠标释放时，跳出移动操作
        document.onmousemove = null;
    }
//注意：box.onmousemove和document.onmousemove的差别，前者不需要长按住鼠标，而后者需要

冒泡事件

当父元素和子元素都绑定了“相同事件”，

子元素触发事件的时候会传递给父元素，相当于父元素也触发了事件 ——— 事件传播，冒泡事件

var parent = document.getElementById("parent");
    var box = document.getElementById("box");

    box.onmouseover = function(m){
    	m = m || event;//兼容模式
    	m.cancelBubble = true;//阻止冒泡
    	console.log("子节点");
    }
    parent.onmouseover = function(){
    	console.log("父节点=======");
    }

监听事件

addEventListener('click', fn2, false) //chrome、IE9+
removeEventListener('click', fn2, false)
        参一：注册的事件的事件名字
        参二：注册事件的函数
        参三：true捕获事件，false冒泡事件(默认值)。

attachEvent('onclick', fn1) //IE8-执行顺序相反
detachEvent('onclick', fn1);
        参一：事件名字
        参二：注册事件的函数

//兼容模式
 function addEvent(dom,eventName,fun){//定义函数
    	if(dom.addEventListener){//判断事件兼容的浏览器是否为chrome、IE9+
    		dom.addEventListener(eventName,fun);
    	}else{//否者执行IE浏览器模式下事件
    		dom.attachEvent('on'+eventName,fun);
    	}
    }

    addEvent(document,'click',fn1);//调用函数
    addEvent(document,'click',fn2);

键盘事件

根据输入键盘值（keycode）响应事件；

//例：输入上下左右调整模块
var box = document.getElementById("box");

    document.onkeydown = function(m){//传入参数
    	m = m || event;//兼容模式

    	var boxLeft = box.offsetLeft,//定义初始距离
    		boxTop = box.offsetTop;

    	switch(m.keyCode) {//传递键盘值参数进行循环
    		case 37://左键keycode=37
	    		boxLeft -= 5;//移动距离
	    		break;
    		case 38://上键keycode=38
	    		boxTop -= 5;
	    		break;
    		case 39://右键keycode=39
	    		boxLeft += 5;
	    		break;
    		case 40://下键keycode=40
	    		boxTop += 5;
	    		break;
	    	default://其他情况
	    		console.log("请输入上下左右按键");
    	}

    	box.style.left = boxLeft + "px";//赋值变换后的距离
    	box.style.top = boxTop + "px";
    }