Hi,
Commonly, when we apply event for an HTML Element, we are going to create a function first then put it to function attribute to the html element, in order to trigger the event. Example of this: Assumed that you created a function named PopupHello() that will simply display an alert box with the world "hello" on it. Traditionally, in order to trigger the event, you will put this function inside
the function attribute of a specific html element:
<a href='javascript:void(0)' onclick='PopupHello()'>
That's fine, it works well. But, what if you have the same element in different pages that will do the same function. So, you will have to put the onclick='PopupHello()' for each element, which is for me, it's inappropriate and is costly, because it will add an additional size to your hard drive (or anywhere else..) everytime you add the same element.
Solution for that, is to add a class name for each element that has the same functionality, and during the loading of your website, get all the elements with the same class name and add the function to that class name. I provide the code below to show you how it's done. Just read the comments to understand how it works.
The Code:
<html>
<head>
<script type='text/javascript' language='javascript'>
//this function will get all elements
//in a specific tag passed to this
//if * is passed, it means all the tags
//inside the html
function getDocumentElements(tag)
{
return document.getElementsByTagName(tag);
}
//this is the function that will assign a specific function
//to the click function of a tag within the class
function assignFunction(paramTag, paramClass, paramFunctionName)
{
//first, is to get the elements under a tag
//passed "*" to get all elements regardless what tag
var docElements = getDocumentElements(paramTag);
//loop through each element
for(var i=0; i < docElements.length; i++)
{
//check if the element is under the specific class
if(docElements[i].className == paramClass)
//add the function to the onclick event of the element
docElements[i].onclick = function() {
//this will trigger when this element is clicked
var func = new Function(paramFunctionName);
func();
};
}
}
function PopupHello()
{
window.alert('Hello');
}
function doB()
{
window.alert('Event coming from Class B element');
}
//during window loads
window.onload = function() {
//assign PopupHello() function to any elements
//that belongs to class classA
assignFunction("*","classA", "PopupHello()");
//assign doB() function to anchor elemens (anchor tag <a>)
//that belongs to class classB
assignFunction("a","classB", "doB()");
}
</script>
<title>JavaScript</title>
</head>
<body>
<img class='classA' src='imgA.gif' alt='Class A Image'/> <br /><br />
<img class='classB' src='imgB.gif' alt='Class B Image' /><br />
<a class='classA' href='javascript:void(0)'>Class A - anchor tag</a> <br />
<a class='classB' href='javascript:void(0)'>Class B - anchor tag</a> <br />
<span class='classA'>Class A - span tag</span> <br />
<a class='classC' href='javascript:void(0)'>Class C - anchor tag</a>
</body>
</html>
All elements under class classA will display an alert box saying 'hello'.
classB elements will alert 'Event coming from Class B element'.
And classC will do nothing.
If you will add new element, for example an another anchor tag for classA. You will
simply put the attribute class then attribute value to classA (hence, class="classA").
And, if you want to add a clicked event for other element like for example class classC then anchor tag.
Simply put this inside the onload function: assignFunction("*","classC", "NameOfFunctionForClassC()");
That's all. Thank you.
-Jygz
jjygot@gmail.com
No comments:
Post a Comment