Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 再谈javascript事件模型

    post by onelong / 2010-7-5 18:07 Monday [javascript]

    在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
    Firefox支持几乎所有的W3C DOM二级标准,和部分W3C DOM三级标准。W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。在Firefox下JavaScript函数中获取event的方法:

    1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event) 。

    2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过
    event = arguments[0];来获取event对象。如<img src="image.jpg" border="0" onclick="click(event)"/>

    3、间接绑定
    obj.onclick = click;
    function click(evt){
    var event = evt||window.event;
    }
    当然你还可以注册事件
    在DOM二级标准中,为某个元素注册事件处理函数用addEventListener(),移除用removeEventListener()
    在IE中则
    obj.attachEvent (on+ "eventName", funHandler);
    obj.detachEvent (on+ "eventName", funHandler);
    上面onclick="click(event)"中的event是一个变量,怎样接收这个参数呢?回调函数应该像如下编写
    function click(evt){
    var event = evt||window.event;
    }
    在IE中evt是undefined的,但可以通过window.event获取,注意这语句的顺序呀,在ff下window.event是undefined!不过我更主张像如下的写法var event = (evt)?evt:window.event;结构明了!

    更多细节请看http://www.ways2u.com/?post=28

     

  • js事件处理机制

    post by onelong / 2009-10-12 0:44 Monday [javascript]

    document.getElementById("Div").onclick = showmsg;
     function showmsg(){
         alert("!!!")
    }
      等效于:
     <div id="Div" onclick="alert("!!!");">单击事件</div>

    阅读全文>>

  • javascript创建事件

    post by onelong / 2009-10-7 21:12 Wednesday [javascript]

    <html>
    <body>
    <div id="obj" style="width:200px; height:200px; background-color:#999" onmousemove="this.style.backgroundColor='red'"></div><br />
    <input type="button" value="点击" onclick="check()" />//点击button就会创建obj的onmousemove
    <script language="javascript">
    function check(){
      var obj = document.getElementById('obj');
        if( document.createEvent )     //IE
        {
            var evObj = document.createEvent('MouseEvents');
            evObj.initEvent( 'mousemove', true, false );
           obj.dispatchEvent(evObj);
        }
    else if( document.createEventObject ) //firefox
    {
          obj.fireEvent('onmousemove');
    }  }
    </script>
    </body>
    </html>

    1. createEvent(eventType)
    参数:eventType 共5种类型:
        Events :包括所有的事件.
        HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 'submit', 'unload'. 事件
        UIEevents :包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
         间接包含 MouseEvents.
         MouseEvents:包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.
         MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved', 'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.
    2. 在createEvent后必须初始化,为大家介绍5种对应的初始化方法
    HTMLEvents 和 通用 Events:
        initEvent( 'type', bubbles, cancelable )
        UIEvents :initUIEvent( 'type', bubbles, cancelable, windowObject, detail )
        MouseEvents:initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
        MutationEvents :initMutationEvent( 'type', bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange )
    3. 在初始化完成后就可以随时触发需要的事件了,为大家介绍targetObj.dispatchEvent(event)
       使targetObj对象的event事件触发需要注意的是在IE 5.5+版本上请用fireEvent方法,还是浏览兼容的考虑

  • JavaScript事件处理

    post by onelong / 2009-10-7 2:43 Wednesday [javascript]

     IE5/Mac 的事件对象既定义了 srcElement 属性,也定义了 target 属性,这两个属性都指向接收事件的元素。需要抽象的最重要的事件对象属性可能得算指向接收事件的 HTML 元素的引用。NN4 和 W3C 的事件对象采用相同的属性名(target),而 IE4+ 的事件对象则使用 srcElement 属性
    代码1:
    function functionName(evt) {
          evt = (evt) ? evt : ((window.event) ? window.event : "")
          if (evt) {
              var elem
              if (evt.target) {
                  elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
              } else {
                  elem = evt.srcElement
              }
              if (elem) {
                  // process event here
              }
          }
    }
    代码2:
    function getTargetElement(evt) {
          var elem
          if (evt.target) {
              elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
          }else {
              elem = evt.srcElement
          }
          return elem
    }

    阅读全文>>

  • IE下onpropertychange与firefox下oninput

    post by onelong / 2009-10-6 23:25 Tuesday [javascript]

    onpropertychange能够捕获每次输入值的变化。例如:<INPUT id="test" name="test" />对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。
    onpropertychange 不被firefox所支持,如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。

    这是个小例子:
    <html>
    <head>
    </head>
    <body>
    <input id='txt' value="" />
     <script language="javascript">
    if(navigator.userAgent.indexOf("MSIE")>0){
    document.getElementById('txt').attachEvent("onpropertychange",txChange);
    }else if(navigator.userAgent.indexOf("Firefox")>0){
    document.getElementById('txt').addEventListener("input",txChange2,false);
    }
    function txChange(){
    alert("testie");
    }
    function txChange2(){
    alert("testfirefox");
    }
    </script>
    </body>
    </html>
         通过这种方法就可以实时监测文本框的输入啦!

  • IE和Firefox中的事件

    post by onelong / 2009-10-6 23:01 Tuesday [javascript]

    在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
    Firefox支持几乎所有的W3C DOM二级标准,和部分W3C DOM三级标准。W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。
    通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。
    在Firefox下JavaScript函数中获取event的方法:
    1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event) 。
    2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过event = arguments.callee.caller.arguments[0];来获取event对象。
    3、
    document.onclick = click;
    function click(evt){
    var event = evt||window.event;
    }

    阅读全文>>