有時我們需要用 js 來觸發畫面上 Element 的特定事件,例如:在畫面上有一個按扭 Element,其 onclick 事件為 alert 一串訊息,但我們想要在不用滑鼠點擊該按扭時,用 js 來觸發該按扭的 onclick 事件時該如何做呢?
 觸發的方法在 IE 與 Firefox 上有所不同,以下將分別介紹。
  • 在 Firefox 中觸發方法
    請遵照以下步驟執行。
    1. 建立 Event 物件
      使用 document.createEvent (eventType) 來建立 Event 事件。
      其中的 eventType 參數(字串)有以下幾種:
      • Events
        包含所有的 event types。
         
      • HTMLEvents
        包括「abort」、「blur」、「change」、「error」、「focus」、「load」、「reset」、「resize」、「scroll」、「select」、「submit」和「unload」。
         
      • UIEvents
        包括「DOMActivate」、「DOMFocusIn」、「DOMFocusOut」、「keydown」、「keypress」和「keyup」。
         
      • MouseEvents
        包括「click」、「mousedown」、「mousemove」、「mouseout」、「mouseover」和「mouseup」。
         
      • MutationEvents
        包括「DOMAttrModified」、「DOMNodeInserted」、「DOMNodeRemoved」、「DOMCharacterDataModified」、「DOMNodeInsertedIntoDocument」、「DOMNodeRemovedFromDocument」和「DOMSubtreeModified」。
         
    2. 初始化 Event 物件
      Event 物件有下列四種初始方法。
      • Events 和 HTMLEvents
        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. 使用 dispatchEvent(eventObj) 來觸發事件
      執行要被觸發 Element 的 dspatchEvent(eventObj) 方法來觸發事件,以一開始的例子來說,就是:按鈕物件.dspatchEvent(前二步驟建出的 Event 物件)
       
  • 在 IE 的觸發方法
    IE 的觸發方法相對簡單,只要執行將被觸發 Element 的 fireEvent(eventType) 即可,其中的 eventType 參數為字串,其內容值為要觸發的 event,如:「onclick」、「onmouseover」…等
     
要寫出可相容於 Firefox 和 IE 的程式碼,則可以利用 Firefox 和 IE 建立 Event 方法的不同來區別,在 Firefox 中使用 document.createEvent(eventType) 來建立 Event 物件,而 IE 中是用 document.createEventObject() 來建立 Event 物件。
所以我們的範例為:觸發畫面上 id 為 test 的 Element 的 onclick 事件。
    畫面上:
    <html>
        <body>
            <input type='text' id='test' onclick='alert("hello")'>
        </body>
    </html>

    js 寫法:
    var target = document.getElementById('test');
    if (document.createEvent) {
        var eventObj = document.createEvent('MouseEvents');
        eventObj.initEvent('click', true, false);
        target.dispatchEvent(eventObj);
    } else {
        target.fireEvent('onclick');
    }
 
另外提供一種比較簡單的觸發方式,就是利用 eval 和 Element 的 getAttribute() 方法。以上為例:
    eval(document.getElementById('test').getAttribute('onclick'));
 
但此種方法有其限制,也就是他只會觸發明確寫在 Element Tag 上的 onclick 指定的方法,但若是使用 addEventListener() 或是 attachEvent() 加入的方法就不會執行。以上為例,若使用 addEventListener() 加入 alert("welcome"); 給 test,則利用 eval 和 Element 的 getAttribute() 方法來觸發事件的手段就只會執行 Element Tag 上的 alert("hello"),而不會執行用 addEventListener() 加入的 alert("welcome")。但若是用 dispatchEvent() 或 fireEvent() 就不會有此問題
 
以下為參考資料:
http://www.heyseven.cn/showtopic-47.html
http://www.howtocreate.co.uk/tutorials/javascript/domevents
創作者介紹
創作者 大笨鳥 的頭像
大笨鳥

大笨鳥的私房菜

大笨鳥 發表在 痞客邦 留言(0) 人氣()