Prototype - Event findElement() Method

This method returns the first DOM element with a given tag name, upwards from the one on which the event occurred.

Sometimes, you're not interested in the actual element that got hit by the event. Sometimes you're interested in its "closest element". This is what findElement is for.

The provided tag name will be compared in a case-insensitive manner.

Syntax

Event.findElement(event, tagName);

Return Value

Returns the first DOM element with a given tag name. If no matching element is found, the document itself (HTMLDocument node) is returned.

Example

Here's a simple code that lets you click everywhere on the page and hides the closest-fitting paragraph around your click (if any).

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = Event.findElement(event, 'P');
            alert("Hiding Tag : " + element.tagName );
            
            if ( element != document ) {
               element.hide();
            }
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click anywhere to see the result.</p>
      <p id = "para1">This is paragraph 1</p>
      <br />
      <br />
      
      <p id = "para2">This is paragraph 2</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Output

prototype_event_handling.htm