Jump to content
JavaScript: The Behavioral Layer

JavaScript Event Delegation

All events in this column are handled globally. The DOM classes of the element decide what function will be called.

Test: list menu
Test: click event

Test: Tooltip
Show tooltip for this module
Test: change event



Test: click/change on checkbox

Test: Mouse events

Mouse over the text to test mouse events

Hover on me!

Test: Preventing default action

Clicking the link should display a message and not send you to google.com

Google?

Yahoo?

Test: Page specific function

Clicking the link should display a message and prevent default action

Hear Me Quack?

Test: Accordion module

Toggling a fold is an internal module event

DIV Accordion
  • UL Accordion
  • UL Accordion 2
DIV Accordion
  • UL Accordion
  • UL Accordion 2
Test: Asynchronous loading module

Uses ajaxLoad to load on window.load, and ajaxGet to load on request (i.e. click)

Test: Lightbox module

Click the link to open a lightbox

Lightbox

Test: Filter list

Typing in textfield should filter the list below

  • Alpha
  • Orange
  • Apple
  • Appletini
  • Orangutang
Test: Capturing focus and blur events

Focusing and blurring input field with update text in span

Test: Broadcast update

Update background and send message

Test: Recieve broadcast and update text

All events in this column are triggered from the elements 'on'-event property.

Profiling: onclick

Profiling: onchange


Profiling: onchange

Profiling: Mouse events

Mouse over the text to test mouse events

Hover on me!

Profiling: Internal module event

Toggling using an onclick

Accordion Header 1
Accordion Header 2