有時我們需要用 js 來觸發畫面上 Element 的特定事件，例如：在畫面上有一個按扭 Element，其 onclick 事件為 alert 一串訊息，但我們想要在不用滑鼠點擊該按扭時，用 js 來觸發該按扭的 onclick 事件時該如何做呢？
觸發的方法在 IE 與 Firefox 上有所不同，以下將分別介紹。
所以我們的範例為：觸發畫面上 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
觸發的方法在 IE 與 Firefox 上有所不同，以下將分別介紹。
- 在 Firefox 中觸發方法
請遵照以下步驟執行。- 建立 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」。
- Events
- 初始化 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 )
- Events 和 HTMLEvents
- 使用 dispatchEvent(eventObj) 來觸發事件
執行要被觸發 Element 的 dspatchEvent(eventObj) 方法來觸發事件，以一開始的例子來說，就是：按鈕物件.dspatchEvent(前二步驟建出的 Event 物件)
- 建立 Event 物件
- 在 IE 的觸發方法
IE 的觸發方法相對簡單，只要執行將被觸發 Element 的 fireEvent(eventType) 即可，其中的 eventType 參數為字串，其內容值為要觸發的 event，如：「onclick」、「onmouseover」…等
所以我們的範例為：觸發畫面上 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
全站熱搜
留言列表
WebService (1)