方法一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁 | 八頁
操控器一頁 | 二頁 | 成員表
Firefox, Safari, Chrome 使用 addEventListener, removeEventListener。
- 對指定的事件型態,加上新的事件操控器。其語法是:
元素物件.addEventListener(事件型態, 操控器, 捕捉旗);
- 對指定的事件型態,移除事件操控器。其語法是:
元素物件.removeEventListener(事件型態, 操控器, 捕捉旗)
元素物件是指 HTML 元素的物件。第一個參數是事件型態的字串,以下是 DOM Level 3 建議的型態,但是瀏覽器沒有全部應用:
- 用戶事件組(UIEvent, UIEvents):DOMFocusIn, DOMFocusOut, DOMActivate, focus, blur。
- 文字事件組(TextEvent):textInput。
- 鍵盤事件組(KeyboardEvent):keydown, keyup。
- 滑鼠事件組(MouseEvent, MouseEvents):click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout。
- 滑鼠多滾輪事件組(MouseMultiWheelEvent):mousemultiwheel。
- 滑鼠單滾輪事件組(MouseWheelEvent):mousewheel。
- 變動事件組(MutationEvent, MutationEvents):DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified。
- 變動名稱事件組(MutationNameEvent ):DOMElementNameChanged, DOMAttributeNameChanged。
- 基本事件組(Event, HTMLEvents):abort, change, error, load, reset, resize, scroll, select, submit, unload。
操控器(event handler)通常是一個函式位址,此函式會針對發生的事件,作出指定的工作。
捕捉旗設為 true,則此宣告的操控器會最最優先執行。由子元素上傳的事件,則會被忽略。相同的操控器可以用不同的捕捉旗(true, false)宣告兩次,要分別移除。完全相同的宣告(捕捉旗也相同),後來的會被拋棄。
IE 使用 attachEvent, detachEvent。
- 對指定的事件型態,加上新的事件操控器。其語法是:
元素物件.attachEvent(事件型態, 操控器);
成功則回傳 true;否則回傳 false。
- 對指定的事件型態,移除事件操控器。其語法是:
元素物件.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 事件。
- 先增加新操控器,然後用滑鼠點灰色方塊,就會改變數字。