jQuery Mouse events, events are relative to a specific element. - jsFiddle Mouse |
|||
---|---|---|---|
Mouse Test Area |
|||
jQuery Event | Objective | Method | Test Element |
element.click() |
On click using animate take 3 seconds to increase height of mouse test area. | animate(map, duration) | |
element.dblclick() | Set mouse text area back to its original size | animate | |
element.mouseenter | html | ||
element.mouseleave | |||
element.click() | hide | ||
element.click() | |||
element.click() | toggle | ||
element.click() | unbind | ||
element hover | This is actually two event, a mouse enter and a mouse leave | ||
Keyboard events can be more complicated you are dealing with an EventObject - jsFiddle Keyboard | |||
Keyboard Test Area |
|||
element.keydown | Print out key that is being held down and set background to yellow. | html | |
element.keyup | Print out key that has just been released, and set background to blue. | ||
Document events correspond to the entire document object - jsFiddle Document | |||
Document Test Area |
|||
document.ready() | Call CSS method so that every other row of this table has a light gray background (make sure it differentiates itself from eventTableTwilight.css) | css | |
document.scroll() | On scroll set document test area, to text scrolling using fadeout. | fadeOut | |
window.unload() | W3C Unload example. See what happens on IE exit the tab with eventTable.html loaded. Chrome and Firefox updates both drop the unload event this unload event only works on IE | N/A | N/A |
window.beforeprint | Chrome 45 has a bug, does not detect beforeprint. | alert | Try File --> Print |
Form events correspond to elements - You need to create your own jsFiddle for Form - jsFiddle help | |||
Form Test Area: |
|||
formElement.submit() | On submit toggle (visible, invisible) for Form Test Area identifier: .testArea#form | toggle | |
formElement.change() | Add two more teams to each conference, then delete the current contents in this box, and enter a description instead. | ||
formElement.blur() | jsFiddle, on exit from text field, add element to .testArea#form #blur |