Search:


Javascript.Event

Recent Changes
Printable View
Page History
Edit Page

Dealing with events in Javascript Event Handlers

See also Event Handlers

Events are managed by event handlers: functions that are called when a certain kind of event happens on an element within an HTML document. The handling function may or may not be a method of an EventListener object.

To get a function to be treated as an event handler it must be registered as one, which can be done in many ways - not least because of the multiple API standards for doing so, some blessed by the W3C and others not.

The basic old-school IE method (conforming to "DOM level 0" is to A) specify inline javascript snippets in attribute values of the relevant HTML elements, or B) do the same via code in javascript <script> elements, assigning the method to be called as a property of a DOM element reference. These attributes are given names based on the event type, such as onclick for click events etc.

method A

This method seems shorter and more obvious but it leads to a potentially messy situation where too much javascript code and logic is baked into your HTML code, which should remain clear of presentation and logic, leaving those aspects to be dealt with via CSS and Javascript. 

  <div id="shinyButton" onclick="callfunction()">
    Click Me
  </div>

method B

This method looks long and verbose here, but it is preferred, as it allows you to maintain purely structural HTML code, and leave event handler registration to centralized Javascript modules. 

<div id="shinyButton">
   Click Me
<div>

<script type="text/javascript">

   var theButton = document.getElementById("shinyButton");
   if (theButton)
   {
      theButton.onclick = onButtonClick;
   }

   function onButtonClick(e)
   {
      alert("The Button Was Successfully Clicked!");
   }
</script>

Pointer Capture

This functionality helps maintain consistent handling of mouse events when dealing with complicated interactions like dragging elements around with the mouse or pointer cursor. TBD

This is part of the SpineFORGE Reference Documentation for Javascript?