js事件

什么是事件

事件就是js和html之间的交互行为(怎么发生的,有可能是页面自动的,也可能是用户操作的).

事件源对象

触发事件的元素(发生在谁身上)

事件处理程序

要处理的程序(发生了什么事)

事件对象

当事件发生的时候,具体发生了哪些信息(如当按键盘的时候按的哪个键或者鼠标光标在页面的哪个位置等等)

事件的分类

1. 鼠标事件
   onclick
   ondbclick
   onmousedown
   onmouseup
   onmousemove
   onmouseover
   onmouseout
   onmouseenter
   onmouseleave
2. 键盘事件
   onkeyup
   onkeydown
   onkeypress
3. 表单事件
   onsubmit
   onblur
   onfocus
   onchange
4. 页面事件
   onload
   onbeforeunload

绑定事件

IE使用 : obj.attachEvent(“事件(on)”, “处理程序”) 添加
obj.detachEvent(“事件(on)”,”处理程序”)删除
非IE使用 : obj.addEventListener(“事件(不加on)”, “处理程序”, 布尔值) 添加
obj.removeEventListener(“事件(不加on)”, “处理程序”, 布尔值) 删除
既然这里有区分IE和非IE那么我们又要开始封装这个绑定事件

function onClickListener(obj, type, handler, flg){
    //默认情况下flg===false,为冒泡事件
    if(flg === undefined){
        flg = =false;
    }
    if(element.attachEvent){
        return element.attachEvent("on"+type+handler,flg);
    }else if(element.addEventListener){
        return  element.addEventListener(type, handler, flg);
    }
}

function removeOnClickListener(obj,type,handler,flg){
    //默认情况下flg===false,为冒泡事件
    if(flg === undefined){
        flg = =false;
    }
    if(element.detachEvent){
        return element.detachEvent("on"+type+handler,flg);
    }else if(element.removeEventListener){
        return  element.removeEventListener(type, handler, flg);
    }
}

事件对象

IE：window.event
火狐：对象.on事件=function(ev){}
怎么兼容所有浏览器呢?

obj.on事件 = function(ev){
    var e = ev || window.event
}

鼠标事件对象属性

相对于浏览器位置的：
clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置。
clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置。
相对于文档位置的：
pageX 当鼠标事件发生的时候，鼠标相对于文档X轴的位置。（IE7/8无）
pageY 当鼠标事件发生的时候，鼠标相对于文档Y轴的位置。（IE7/8无）
相对于屏幕位置的：
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置。
screenY 当鼠标事件发生的时候，鼠标相对于屏幕Y轴的位置。
相对于事件源的位置：
offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置。
offsetY 当鼠标事件发生的时候，鼠标相对于事件源Y轴的位置。
event.button：返回一个整数，指示当事件被触发时哪个鼠标按键被点击。0规定鼠标左键，1规定鼠标滚轮，2规定鼠标右键。不过老版本的IE并没有遵守W3C的规范，它的button属性含义如下：1鼠标左键 2鼠标右键 3左右同时按 4滚轮 5左键加滚轮 6右键加滚轮 7三个同时。目前IE11.0版本，无兼容性问题。

键盘事件对象属性

keyCode：获得键盘码。空格：32 回车13 左上右下：37 38 39 40。which属性有兼容性问题。
ctrlKey：判断ctrl键是否被按下，按下是true,反之是false 布尔值。还有shiftKey altKey。
type：用来检测事件的类型。

目标事件源对象

IE使用: 事件对象.srcElement
非IE使用 : 事件对象.target
兼容函数

function target(ev){
    var e = ev || window.event;
    var target = e.target || window.event;
}