事件对象——event

一、介绍

把一个click时间log出来是这样的：

{
    altKey:false,
    bubbles:true,
    button:0,
    buttons:0,
    cancelBubble:false,
    cancelable:true,
    clientX:1,
    clientY:3,
    composed:true,
    ctrlKey:false,
    currentTarget:null,
    defaultPrevented:false,
    detail:1,
    eventPhase:0,
    fromElement:null,
    isTrusted:true,
    layerX:1,
    layerY:147,
    metaKey:false,
    movementX:0,
    movementY:0,
    offsetX:1,
    offsetY:0,
    pageX:1,
    pageY:147,
    path:(5) [div, body, html, document, Window],
    relatedTarget:null,
    returnValue:true,
    screenX:1,
    screenY:94,
    shiftKey:false,
    sourceCapabilities:InputDeviceCapabilities,
    srcElement:div,
    target:div,
    timeStamp:12270.44,
    toElement:div,
    type:"click",
    view:Window ,
    which:1,
    x:1,
    y:3
}

二、详细的一些注意点

在IE8，事件触发有一个对象叫做event,event里面装着各种事件的相关属性值

但是Firefox不支持event,直到现在最新版本都不支持，chrome和IE9支持ev和event

	chrome	IE9+	FF	IE8-
ev	√	√	√
event	√	√		√

 

document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    
    alert(oEvent.keyCode);
};

1.兼容事件对象  var oEvent=ev||event;

2.阻止事件冒泡  oEvent.cancelBubble = true;

document.onclick=function (ev)
{
    var oEvent=ev||event;
    
    oEvent.cancelBubble = true;
};

3.默认行为

禁止默认事件，return false可以去除浏览器自带行为。

4.ctrl+回车

onkeydown事件会多出keyCode属性

var oTxt1=document.getElementById('txt1');
    
oTxt1.onkeydown=function (ev)
{
    var oEvent=ev||event;
    if(oEvent.keyCode==13 && oEvent.ctrlKey)
    {
        oTxt2.value+=oTxt1.value+'\n';
        oTxt1.value='';
    }
};

除了ctrlKey外，还有shiftKey和altKey