• javascript Event对象详解


    Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons.Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象。
    event对象只在事件发生的过程中才有效。
    event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

    在IE中,事件对象是window对象的一个属性event,也就是说,事件处理对象必须这样访问事件对象。

    oDiv.onclick=function(){

      var oEvent=window.event;(chrome浏览器也支持)

    }

    尽管他是window对象的属性,event对象还是只能在事件发生时访问,所有的事件处理函数执行完毕后,事件对象被销毁

    dom标准则说,event对象必须作为唯一的参数传给事件处理函数。所以,在dom兼容的浏览器(mozilla,safari,opera等)中访问事件对象,要这么做:

    oDiv.onclick=function(){

      var OEvent=arguments[0];

    }

    当然,可直接命名参数,访问就更方便。

    oDiv.onclick=function(oEvent){

    }

    把Ie和dom结合起来:

    document.onclick=function(e){
     var evt=window.event || e //evt evaluates to window.event or inexplicit e object, depending on which one is defined
     alert(evt.clientX) //do something with evt
    }

    下面的一段代码:

    <body>
    <button id="bt">hello world</button>
    <script>
    var bt=document.getElementById("bt");
    function foo(evt){
            alert(evt);
             
    }
    bt.onclick=foo;
    
    </script>
    </body>

    在chrome下点击button,会弹出:[object MouseEvent];

    在Ie下,会弹出undefined。

    <script>
    var bt=document.getElementById("bt");
    function foo(e){
        var  evt=window.event||e;
            alert(evt);
             
    }
    bt.onclick=foo;
    
    </script>

    在dom和Ie下都可 工作。

    属性:

    altKey, ctrlKey and shiftKey:

    The above property is used to indicate whether the Alt KeyControl Key or Shift Key was pressed by the user when the event occurred. The indication is known by appropriately setting the value as true or false. This property takes a boolean value as its return type. Both Internet Explorer and Navigator support this property. In Navigator, there is an extra property called metaKey which is not supported by Internet Explorer. This indicates if the user has pressed Meta key when the event occurred.

    button
    描述:检查按下的鼠标键。

    语法:event.button

    可能的值:
    0 没按键 
    1 按左键 
    2 按右键 
    3 按左右键 
    4 按中间键 
    5 按左键和中间键 
    6 按右键和中间键 
    7 按所有的键

    这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

    cancelBubble

       :一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();) 

    clientX
    描述:返回鼠标在窗口客户区域中的X坐标

    语法:event.clientX

    注释:
    这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


    5.clientY
    描述:返回鼠标在窗口客户区域中的Y坐标。

    语法:event.clientY

    注释:
    这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

    keyCode
    描述:检测键盘事件相对应的内码。这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件

    语法:event.keyCode[ = keyCode]

    可能的值:
    这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。

    offsetX
    描述:检查相对于触发事件的对象,鼠标位置的水平坐标

    语法:event.offsetX


    10.offsetY
    描述:检查相对于触发事件的对象,鼠标位置的垂直坐标

    语法:event.offsetY

    screenX
    描述:检测鼠标相对于用户屏幕的水平位置

    语法:event.screenX

    注释:
    这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


    14.screenY
    描述:检测鼠标相对于用户屏幕的垂直位置 (如果把窗口缩小,还是距离屏幕,而不是窗口)。

    语法:event.screenY

    注释:
    这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

    returnValue
    描述:设置或检查从事件中返回的值

    语法:event.returnValue[ = Boolean]

    可能的值: 
    true 事件中的值被返回 
    false 源对象上事件的默认操作被取消

    置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();) 

    阻止某个事件的默认行为:在ie中要阻止某个事件的默认行为,必须将returnValue设置为false;oEvent.returnValue=false;

    而在mozilla中 ,只有调用preventDefault()方法即可。

    声明时候才需要阻止事件的默认行为呢?其实,很多情况下阻止事件默认行为十分有用的。

    第一,当你想在用户右键点击页面时,阻止使用上下文菜单。既可以使用它。只要阻止contextmenu事件的默认行为就可以了:

    document.body.oncontextmenu=function(e){
        if(isIE){
            e=window.event;
            e.returnValue=false;
        }
        else{
            e.preventDefault();
        }
    }

     The following example disables the default action of all links on the page that proceeds the script when clicked on, which is to go to the URL specified in its "href" attribute:

    function disablelink(e){
     var evt=window.event || e
     if (evt.preventDefault) //supports preventDefault?
      evt.preventDefault()
     else //IE browser
      return false 或换成evt.returnValue=false;
    }
    
    var alllinks=document.getElementsByTagName("a")
    for (var i=0; i<alllinks.length; i++){
     alllinks[i].onclick=disablelink
    }

    .type
    描述:返回事件名。

    语法:event.type

    注释:
    返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click
    只读。

    srcElement/target:事件源,就是发生事件的元素; 

    来自:http://www.cnblogs.com/prince1988/archive/2009/04/04/1429525.html

    事件触发顺序:

     click事件在触发时,会发生mousedown事件,然后发送mouseup事件,类似的,要触发dbclick事件,在同一个目标上要按顺序发生如下事件:

    1.mousedown 

    2mouseup

    3click

    4mousedown

    5mouseup

    6click

    7dbclick

    移动鼠标先从一个对象进入另一个对象时,先发生的事件是mouseout(发生在鼠标移出的那个对象),接着,在这两个对象上都触发mouseover事件,最后,在鼠标进入的那个对象上触发mouseover事件。

     

  • 相关阅读:
    shell编程 之 引号、括号的用法总结
    shell编程 之 文件包含
    shell编程 之 输入输出重定向
    shell编程 之 流程控制(条件语句和循环语句)
    shell编程 之 函数
    IOS 定位
    IOS添加多个按钮在导航栏
    移除UIView上面的所有控件
    UITabBarController
    IOS 调用拨打电话Api
  • 原文地址:https://www.cnblogs.com/youxin/p/2660082.html
Copyright © 2020-2023  润新知