使用javascript觸發change事件

雖然是以change事件作為主題,不過其他事件應該都適用。先說jQuery觸發物件的change方式,因為很直覺。

利用jQuery的selector取得物件之後,然後執行物件的change()方法就可以觸發物件的change事件。例如$(“#ddd”).change()。

而利用javascript去觸發某一個dom物件的change事件有一點小麻煩,而且必須分成兩種狀況來講。

第一種比較簡單,只不過看起來有點奇怪。一般用純javascript語法來註冊事件處理函數會以物件的method方式來設定,也就是所謂的DOM Level 0的事件處理機制。例如document.getElementById(“ddd”).onchange=function(){},那個onchange本身就是一個函數,而change事件觸發時就會去執行onchange,那麼也就是說如果讓這個函數執行就是代表觸發change事件了,而執行該函數很簡單,就是在函數名稱後方加上()雙括號就可以了。所以用DOM Level 0的方式來觸發change事件就是像obj.onchange()這樣。

不過如果是使用addEventListener或attachEvent(DOM Level 2)來註冊事件處理機制,上述作法就不管用了。查了一下手冊,找到「派遣合成事件」可以使用。它的作法是先利用document.createEvent() [DOM]或document.createEventObject() [IE]產生事件物件,其中document.createEvent()必須再指定事件類型為參數,參數為後述其中之一,分別是”HTMLEvents”、”MouseEvents”及”UIEvents”;而且還需要再經過event.initEvent()來初始化,初始化的參數有三個,分別是事件類型、可泡沫傳遞、可事件補捉,使用範例:e.initEvent(“change”,true,false)。IE的事件物件看起來不用初始化,實際是將初始的動作放在後面。

完成前述事件物件的建立及初始化之後,接下來就是將事件派給物件。DOM是使用dispatchEvent,例如obj.dispatchEvent(e),IE則是使用fireEvent,IE就是在這裡做事件物件的初始化,例如obj.fireEvent(“onchange”,e)。

【補充】

使用DOM Level 2的方式來註冊事件處理機制,包含派遣合成事件,使用上都需要判斷相容性,一般是使用物件檢測,例如:

【註冊事件】

if(document.addEventListener){

something to do

}else if(document.attachEvent){

another thing to do

}

【派遣事件】

if(document.createEvent){

something to do

}else if(document.createEventObject){

another thing to do

}

【selectedIndex】

可以用selectedIndex來變更select物件選取的項目。這裡

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Proudly using Dynamic Headers by Nicasio WordPress Design