Event listeners are very important tools for embedding JavaScript in within the <body> or <head> of your document. They allow you to ensure the JavaScript is available only once the page loads entirely, or when a certain element loads, ensuring that your function never returns an error because it didn’t recognize that the element it is supposed to effect was on the page, it just hadn’t loaded yet.
The following snippet will hide the element with the id featurebox-1 when the window is loaded in entirety. If you didn’t use the Event.observe you’d have to use the $('featurebox-1').hide(); after the element in the document or use one of the following two methods:
Example 1 – Using the onload Attribute of the Body Tag
HTML/JavaScript
<script type="text/javascript">
function init() {
$('featurebox-1').hide();
});
</script>
<body onload="init();">
Or
HTML/JavaScript
<body onload="$('featurebox-1').hide();">
Using the following snippet you have the ability to move and change the code’s placement without any worries that moving items would effect the outcome.
Example 2 – JavaScript that can be Place Anywhere
JavaScript
<script type="text/javascript">
Event.observe(window, 'load', function() {
$('featurebox-1').hide();
});
</script>
There is also a way to make Event.observe appear to listen for specific events, like clicking on a link, or a div or some other element.
{chitikaad}
In the following code example you’ll see that when an element with the id featurebox-1-listen is clicked it will hide the element with the id featurebox-1 but that this action will not be possible until the entire window has loaded; that will ensure all elements called within this function are fully loaded and ready to go before it can start to ‘listen’ for the click on featurebox-1-listen.
Example 3 – Javascript that can be Placed Anywhere, Including a click Listener
JavaScript
Event.observe(window, 'load', function() {
Event.observe('featurebox-1-listen', 'click', function(){
$('featurebox-1').hide();
});
});
Summary
Prototype Functions Used
Prototype Functions Mentioned
This site runs on the Thesis WordPress Theme
If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.
If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:
{ 1 comment… read it below or add one }
Hi
I have to event.observe for all my input tags
With JQuery I use ‘input’ and all tags of this kind will be affected but I don´t know how to make it the same with prototype js. Is there a way to make an action for a group of tags?
Thanks for the answer.