Event Handler Attribute

The Event Handler Attributes or just "Event Handlers" are attributes of many elements. The way they work is that they have JavaScript code associated with them that will "handle" the events. The browser will generate events, such as when something is clicked (onclick); double-clicked (ondblclick); the page is loaded (onload, for the <body>); the mouse moves over an element (onmouseover); and others. The events are then "passed" to the event handler attributes to let them respond. If you have more than one JavaScript statement, separate them with semicolons(better- always terminate a statement with a semicolon). Also, be careful about nesting quotes.

Examples:

The code:

<p onclick="this.style.textDecoration='line-through'">Click to cross out.</p>

<h1 onmouseover="document.body.style.color='yellow';
                 document.body.style.backgroundColor='purple';
                 document.body.style.textDecoration='blink';"
        onmouseout="document.body.style.color='black';
                 document.body.style.backgroundColor='gray';
                 document.body.style.textDecoration='none';">
    Don't look at me!
</h1>

<body onload="alert('This is an an onload event')">

...as it appears on the Page:

Click to cross out.

Don't look at me!

See also: this, Nesting Quotes

Back to Knowledge Dump