Whenever we handle elements with JavaScript in HTML generated by a template language such as JSP, we have to write that like:

<div id="customelement1">
  Custom Element
</div>
<script type="text/javascript">
  var element = $('customelement1');
  element.style.color = 'blue';
  element.observe('click', function() { alert('Clicked!') });
</script>

But this HTML makes a browser slow to render. In addition, at the point of view of software design, it violates layer independency.

This library provides "onelementready" event and "onelementdispose" event on any elements, and now we can use this like:

// foo.js
function initialize(element) {
  element.style.color = 'blue';
  element.observe('click', function() { alert('Clicked!') });
}

<%-- foo.jsp --%>
<div class="elementevent" onelementready="initialize(this)">
  Custom Element
</div>