Browse DevX
Sign up for e-mail newsletters from DevX

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



Building the Right Environment to Support AI, Machine Learning and Deep Learning

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;
Red Box</div>
<div style="background-color:green;color:black;width:150px;position:relative">
Green Box</div>
Blue Box</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
Thanks for your registration, follow us on our social networks to keep up-to-date