浅谈js事件

一：js事件分为四大类：先说说常用的一些属性

1.键盘事件：
onkeydown 键盘按下
onkeyup 键盘抬起
onkeypress 键盘按下
2.鼠标事件：
注意：out和over会在鼠标从父级移入子级的时候触发，而enter和leave只有在移入和移出子级整体的时候触发
onmoveover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标移入
onmouseleave 鼠标移出
onmousedown 鼠标按下
onmouseup 鼠标抬起
ondblclick 鼠标双击
oncontextmenu 鼠标右键
3.表单事件：
onsubmit 表单提交：点击的是提交按钮，form表单触发onsubmit
onreset 表单重置
onfocus 获取焦点
__注意：一些事件中，系统会有默认事件触发，比如右键的时候会弹出来菜单，比如按了提交按钮跳转网页。这些都是默认事件。默认事件可以被阻止

return false;

4.移动端事件
ontouchstart 相当于鼠标按下onmousedown
ontouchmove 相当于鼠标移动onmousemove
ontouchend 等价于 鼠标抬起onmouseup

二：事件对象

以keydown为例
注意:keydown支持特殊按键，如：command shift 但不区分大小写 A 和 a 的keyCode都是65; keypress不支持特殊按键,keyCode区分大小写

document.onkeydown = function(ev){
        // 获取事件对象可以使用window.event，注意：在火狐或取不到    
        // 在火狐需要通过参数获取
        // 兼容写法
        var evObj = window.event || ev;
        console.log(evObj.keyCode);
        // 如何判断是否按了组合键
        if(evObj.keyCode == 67 && evObj.metaKey){
                console.log("按了command + c");
            }
}

1.evObj.keyCode 每个按键对应一个数字编码
2.evObj.target 触发了事件的元素，触发事件的元素不一定是绑定事件的元素
3.evObj.offsetX/Y 鼠标距离自身的距离
4.evObj.clientX/Y 鼠标距离屏幕的距离
5.evObj.pageX/Y 鼠标距离页面的距离

三：事件绑定

第一种就是上面例子代码，但第一种不能绑定多个事件；而下面的这种可以绑定多个事件。
1.非IE绑定事件的方法
格式: 元素.addEventListener("不包含on的事件名",时间对应的函数,是否在铺获阶段触发false这或者true);

    redDiv.addEventListener("click",function(){
        console.log("2");
     },false);

2.IE绑定事件的方法

    redDiv.attachEvent("click",function(){
        console.log("2");
     },false);

3.兼容写法

**** 参数：
****    element:代表要绑定的事件
****    type:要绑定的事件名(不含on)
****    fn:要绑定的事件对应的函数
function addEvent(element,type,fn){
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,fn);
        }else{
            element["on" + type]= fn;
        }
}