【Java script基础学习】关于事件

鼠标类键盘类表单类浏览器类 事件绑定

赋值式绑定：事件源.on事件类型 = 事件处理函数监听式绑定… 事件源：绑定事件的元素

绝对可以通过this关键字获取 事件目标：触发事件的元素

绝对可以通过event.target获取 事件处理函数：当触发对应事件时，要执行的功能

正常浏览器：接收形参：事件处理函数的第一个形参，默认就是事件对象低版本IE：通过window获取，在事件处理函数内部，通过window的内置属性event获取

window.event

// 获取事件对象的兼容处理
document.onclick = function(eve){
    var e = eve ? eve : window.event;
    console.log(e);
}

事件对象是由浏览器分配只有在事件发生时才被分配事件结束后，事件对象被浏览器回收事件发生必然会执行事件处理函数，所以事件对象只能在事件处理函数内获取

e.type 获取按键：

e.buttone.buttons 获取事件目标：

正常浏览器：e.targetIE低版本浏览器：e.srcElement借助三目运算符处理兼容 鼠标相对于事件目标的坐标

e.offsetXe.offsetY 鼠标相对于浏览器可视区域的坐标

e.clientXe.clientY 鼠标相对于页面的坐标

e.pageXe.pageY 鼠标相对于显示器屏幕的坐标

e.screenXe.screenY

e.keyCodee.which键码的兼容

  document.onclick = function(eve){
    var code = e.keyCode ? e.keyCode : e.which;
    console.log(code);
}

ctrl或control：e.ctrlKeyshift：e.shiftKeyalt或option：e.altKeywin或command：e.metaKey 常见的键码

回车：13空格：32上：38下：40左：37右：39A-Z：65~90 (键盘按键)win或command:91 (mac:command)ctrl:17 （mac:control）alt:18 (mac:option)

正常：e.preventDefault();IE低版本：e.returnValue = false;

// 阻止默认事件的兼容封装
function stopDefault(e){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}