Events

之前設計的每一個函數，都是直接給指令執行，當操作網頁時，我們希望函數在特定的情形下才會被執行，例如在文字輸入列輸入了資料或是按了一個按鈕，Event的含意便是讓我們控制函數執行的時機。
以下為部分Events: >>

• Mouse:
  1. onclick: mouse click
  2. ondblclick: mouse double-click
  3. onmousedown: mouse button is pressed
  4. onmousemove: mose pointer moves
  5. onmouseout: mouse pointer moves out an element
  6. onmouseover: mouse pointe moves over an element
  7. onmouseuup: mouse button is released
  8. onmousewheel: mouse wheel is being rotated
• Keyboard:
  1. onkeydown: a key is pressed
  2. onkeypress: a key is pressed and released
  3. onkeyup: a key is released
• Window & Document:
  1. Offline: document goes offline
  2. onafterprint: after the document is printed
  3. onbeforeonload: before the document loads
  4. onblur: when the window loses focus
  5. onfocus: when the window gets focus
  6. onload: when the document loads
  7. onpagehide: when the window is hidden
  8. onpageshow: when the window becomes visible
  9. onresize: when the window is resized
• Element:
  1. onchange: when an element changes
  2. ondrag: when an element is dragged
  3. ondragend: at the end of a drag operation
  4. ondragenter: when an element has been dragged to a valid drop target
  5. ondragleave: when an element is being dragged out of a drop target
  6. ondragover: when an element is being dragged over a drop target
  7. ondragstart: at the start of a drag operation
  8. ondrop: when dragged element is being dropped
  9. onformchange: when a form changes
  10. onforminput: when a form gets user input
  11. oninput: when an element gets user input
  12. onscroll: when an element's scrollbar is being scrolled
  13. onselect: when an element is selected
  14. onsubmit: when a form is submitted

Exercise

---

先設計一個按鈕，事件是onclick: >> <form> <input type="button" onclick="sayHello()" value="Hello"> </form>

再加上以下的函數。 function sayHello(){ console.log("Hello, World."); } 接下來每按下一次按鈕就會印出一次Hello World。
一個element可以有超過一個事件，所以現在再加上一個函數。 function mouseover(){ console.log("Mouse pointer just move over."); } 然後在原來的button之onclick之後加上onmouseover="mouseover()"，兩者中間用空白分隔，現在將滑鼠移至按鈕上方，可以看到結果。

再試一個例子。 >>
<div id="toDrag" class="dragtarget" draggable="true" ondragstart="dragStart()" ondragend="dragEnd()" ondragover="dragging()" ondragover="allowDrop(event)">Drag this.</div> <div id="toDrop" class="dragtarget" ondragover="allowDrop(event)" ondrop="dropping()"></div>
The css code:
div.dragtarget{ font-size: 100%; width:100px; height: 100px; margin: 15px; padding: 10px; background:green; border: 1px solid red; float:left; }
The functions:
function dragging(){ console.log("Element is being dragging."); } function dropping(){ console.log("Element is dropped."); } function dragStart(){ console.log("Start dragging."); } function dragEnd(){ console.log("End dragging."); } function allowDrop(event){ event.preventDefault(); }
allowDrop(event)這個函數主要是允許將element放在另一個element之內，預設值是無法將物品拖移到另一個物品內。