Tutorials Point


  Learn Prototype
  Prototype Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Prototype Event findElement() Method


previous next AddThis Social Bookmark Button


Advertisements

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>
<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>

To understand it in better way you can Try it yourself.



previous next Printer Friendly

Advertisements


  

Advertisements