Examples i disscuss here are being user by me in developing Paint Chat !! So here I go..
Action on events:Example of events can be mouseclick, keystroke, submitting form etc.
Now init() function will be called when this html page is being loaded.
Now function replay() will be called when Refresh! is clicked. For input text box
Now whenever content of textbox changes the function suggest() will be called. It can be useful when feature like google suggest has to be implemented or so.
<input type="text" size="30" id="search" onchange="suggest()">;
On submitting forms:
So whenever this form is being submitted checkForm() function will be called and can be helpful in verifying values of form elements.
<form method="post" action="some.php" onsubmit="return checkForm()">
onMouseOver and onMouseOut:
Now when mouse is over image fade() function will be called and can be used for animate and styling purposes.
<a href="http://www.buard.blogspot.com" onmouseover="fade()">
<img src="image.gif"> </a>
Registering of eventsA simple way can be:
Conside the html code :
<div id="sample"> ..... some... html..text.. </div>
Now whenever mouseover ocours over this div html element sampleMouseDown() function will be called. Events can also be registered using addEventListener() . Find more information baout it here:Advanced event registration models
var div_sample = document.getElementById('sample');
The first line find the html element with id colorcode and then set its value to "#000000" using innerHTML. In second line, it sets the background of html element with id "bgtest" to green.
document.getElementById("colorcode").innerHTML = "#000000";
Some other tweaks which were useful :
So the drawCurve() function will be called repeatedly after 100ms. You can cancel this process( removing repeatedly calling) by
var intervalID = setInterval(drawCurve, 100);
- You can use
setTimeout(drawCurve,100)function to delay drawCurve() execution for a specified time period(100ms).
Now here in form.php you can fetch value of variable name using $_GET and can perform appropriate action.
var testImg = new Image();
testImg.src = "form.php?name=form_value";
- DOM Design Tricks
- The events