常见鼠标及键盘事件

常见鼠标及键盘事件

鼠标点击事件

对象.onclick = function () {
    //对象被点击时执行该函数
}

鼠标移动事件

document.onmousemove = function () {
    //鼠标移动时执行该函数
}

鼠标进入与离开事件

对象.onmouseover = function () {
    //鼠标进入时执行该函数
}
对象.onmouseout = function () {
    //鼠标离开时执行该函数
}

获得焦点与失去焦点事件

对象.onfoucus = function () {
    //对象获得焦点时执行该函数
}
对象.onblur = function () {
    //对象失去焦点时执行该函数
}

鼠标按下与抬起事件

对象.onmousedown = function () {
    //当对象对鼠标按下时执行该函数
}
对象.onmouseup = function () {
    //当鼠标抬起时执行该函数
}

键盘按下与抬起事件

document.onkeydown = function () {
    //键盘按下时执行该函数
}
document.onkeyup = function () {
    //键盘抬起时执行该函数
}

添加事件与解绑事件

添加事件

addEventListener()

• 该函数有三个参数,IE8不支持该函数
• 第一个参数传入事件的类型，没有on，比如click
• 第二个参数传入事件处理函数
• 第三个参数是布尔类型，一般传入false

attachEvent()

• 只有IE8支持，有两个参数
• 第一个参数是事件类型，有on,如onclick
• 第二个参数是事件处理函数

解绑事件

  上述的添加事件函数都有一个对应的解绑事件函数

removeEventListener()

• 是对应于addEventListener()函数的解绑事件，IE8不支持，有三个参数
• 第一个参数事件的类型，没有on
• 第二个参数就是要解绑的事件处理函数，要使用命名函数
• 第三个参数是布尔类型，一般是false

detachEvent()

• 对应于attachEvent的解绑事件，只有IE8支持，有两个参数
• 第一个参数是事假类型，带on
• 第二个参数是要解绑的事件处理函数，要使用命名函数

兼容代码

  由于上面的代码有的浏览器支持，有的浏览器不支持，所以需要写兼容代码

添加事件的兼容代码

//第一个参数是要添加事件的对象
//第二个参数是要添加的事件类型，不带on
//第三个参数是时间处理函数
function addEventListener(ele,type,fn){
    //是否支持addEventListener()函数
    if (ele.addEventListener) {
        ele.addEventListener(type,fn,false)
    } else if (ele.attachEvent) { //是否支持attachEvent函数
        ele.attachEvent("on"+type,fn);
    } else { //如果二者都不支持
        ele["on"+type] = fn;
    }
}

解绑事件的兼容代码

function removeEventListener(ele,type,fn) {
    if (ele.removeEventListener) {
        ele.removeEventListener(type,fn,false);
    } else if (ele.detachEvent) {
        ele.detachEvent("on"+type,fn);
    } else {
        ele["on"+type] = null;
    }
}