2009年1月3日

element:方法一頁

特徵一頁 | 二頁 | 三頁 | 四頁 | 五頁
方法一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁 | 八頁
操控器一頁 | 二頁 | 成員表
element 的方法
addEventListener()
removeEventListener()
attachEvent()
detachEvent()

Firefox, Safari, Chrome 使用 addEventListener, removeEventListener

  1. 對指定的事件型態,加上新的事件操控器。其語法是:

    元素物件.addEventListener(事件型態, 操控器, 捕捉旗);

  2. 對指定的事件型態,移除事件操控器。其語法是:

    元素物件.removeEventListener(事件型態, 操控器, 捕捉旗)

元素物件是指 HTML 元素的物件。第一個參數是事件型態的字串,以下是 DOM Level 3 建議的型態,但是瀏覽器沒有全部應用:

  1. 用戶事件組(UIEvent, UIEvents):DOMFocusIn, DOMFocusOut, DOMActivate, focus, blur。
  2. 文字事件組(TextEvent):textInput。
  3. 鍵盤事件組(KeyboardEvent):keydown, keyup。
  4. 滑鼠事件組(MouseEvent, MouseEvents):click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout。
  5. 滑鼠多滾輪事件組(MouseMultiWheelEvent):mousemultiwheel。
  6. 滑鼠單滾輪事件組(MouseWheelEvent):mousewheel。
  7. 變動事件組(MutationEvent, MutationEvents):DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified。
  8. 變動名稱事件組(MutationNameEvent ):DOMElementNameChanged, DOMAttributeNameChanged。
  9. 基本事件組(Event, HTMLEvents):abort, change, error, load, reset, resize, scroll, select, submit, unload。

操控器(event handler)通常是一個函式位址,此函式會針對發生的事件,作出指定的工作。

捕捉旗設為 true,則此宣告的操控器會最最優先執行。由子元素上傳的事件,則會被忽略。相同的操控器可以用不同的捕捉旗(true, false)宣告兩次,要分別移除。完全相同的宣告(捕捉旗也相同),後來的會被拋棄。

IE 使用 attachEvent, detachEvent

  1. 對指定的事件型態,加上新的事件操控器。其語法是:

    元素物件.attachEvent(事件型態, 操控器);

    成功則回傳 true;否則回傳 false。

  2. 對指定的事件型態,移除事件操控器。其語法是:

    元素物件.detachEvent(事件型態, 操控器)

IE 的事件型態有: onabort, onactivate, onafterprint, onafterupdate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onbeforeprint, onbeforeunload, onbeforeupdate, onblur, onbounce, oncellchange, onchange, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondataavailable, ondatasetchanged, ondatasetcomplete, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onerror, onerrorupdate, onfilterchange, onfinish, onfocus, onfocusin, onfocusout, onhashchange, onhelp, onkeydown, onkeypress, onkeyup, onlayoutcomplete, onload, onload, onlosecapture, onmessage, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, onoffline, ononline, onpaste, onprogress, onpropertychange, onreadystatechange, onreset, onresize, onresizeend, onresizestart, onrowenter, onrowexit, onrowsdelete, onrowsinserted, onscroll, onselect, onselectionchange, onselectstart, onstart, onstop, onstorage, onstoragecommit, onsubmit, ontimeout, onunload。

上述方法最大的好處是,可以在一個事件型態加上多個操控器。你也可以直接用下法:

元素物件.handler=函式位址;

用這個方法,一個事件型態只能有一個操控器;但是大部分的情形,用這個方法就夠了。

事件發生時,會動態產生 event 物件,存放相關資訊。下面的範例測試,IE, Firefox, Safari, Chrome 都會將 event 物件放在操控器函式的第一個參數。IE 的情形較特殊,請參考 window 事件

  • 先增加新操控器,然後用滑鼠點灰色方塊,就會改變數字。

©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。