Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web, Visual Basic
Expertise: Advanced
Mar 8, 2000

Simplify DHTML Scripting With SrcElement

Browsers Targeted: Internet Explorer 4+

The SrcElement DOM object is generated any time that an event is called, and it contains the element that called the event in the first place. One of the principle advantages of using it is that you can radically simplify your DHTML scripting code by assigning an event on a single container object, then checking the SrcElement to see which object within that container actually fired the event.

A simple demonstration illustrates the point. Suppose that you had three <DIV> elements within another <DIV> element, one of each color red, green or blue. You can place a general event handler on the containing DIV that can then be used to intercept either the outside division or any of the three smaller DIV elements.

 
<script language="JavaScript">
    function getColor(){
        var src=window.event.srcElement;
        alert(src.style.backgroundColor);		
        }
</script>
<div
style="background-color:black;color:white;width:500px;cursor:hand;"
 onclick="getColor()">Black
<div
style="background-color:red;color:black;width:150px;position:relative">
Red Box</div>
<div style="background-color:green;color:black;width:150px;position:relative">
Green Box</div>
<div
style="background-color:blue;color:black;width:150px;position:relative">
Blue Box</div>
</div>

This technique is common for dealing with a large number of items that have similar actions and are contained in a single element. Collapsible trees, subordinate selections, input elements, and behaviors can all make use of this technique.

Kurt Cagle
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap