SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Porting legacy code to non-obtrusive code

    Greetings,

    I am about to port an app using html, css, and javascript where most of the content is mixed with the presentation and behaviour.

    The question I have been asked is: even though this older style is difficult to maintain, will the method proposed my the authors of Simply Javascript perform adequately on a page with hundreds of entries like the one below? Using the newer method, the program would have to iterate through all the elements on the page and assign handlers for click, mouseover, etc. Please advise.

    <tr id='LineItem' class="Line"
    onclick="SelectItem(this)"
    onmouseover="HighlightItem(this, 1)"
    onmouseout="HighlightItem(this, 0)">
    <td style='border-bottom:1px solid'></td>
    <img id=ImgLeft src='/images/pic1.gif' title='Overdue MED' style='position:relative; top:2'>
    </td>

    <td width=75&#37; style="padding-left:10px; padding-right:10px; border-bottom:1px solid #c0c0c0">
    <a href=# onclick='blur();Dialog("","1234")' class=LineName title='Show order'>IV: NS @ 125 cc/hr </a></b><br>
    <span class=LineNextAdmin style='color:myred'><font color=red>Stopped.</font></span>
    <span class=LineEndTime>End Time Expired 02/01/07 08:00</b>.</span><br>
    <span id=OD_3674 style="display:none">Overdue admins:\n\n01/30/07 00:00\n01/30/07</span>
    <a href=# onclick='blur();alert("Overdue administrations:\n\n01/30/07 00:00\n01/30/07")' class=LineOverdue title='01/30/07 00:00 01/30/07'>8 overdue admins</a>
    </tr>

    As you can see, there is a mix of content, style, and javascript all over.

    Regards,
    Huambo
    Last edited by ecunha; Aug 3, 2007 at 08:31.

  2. #2
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing: i was told that a big issue with non-obtrusive style was that by looking at a page, it is not clear what styling and behaviour has been applied to page elements like in the old messy style????

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use event delegation

    You don't need to assign event handlers to every element. Assign the handlers to a containing element and then use the target or srcElement properties of the event object to work out which element fired the handler.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Event Delegation</title>
    	<script type="text/javascript">
    	var ec;
    	window.onload = function() {
    		ec = document.getElementById("eventCatcher");
    		ec.onclick = function(e) {
    			e = e || window.event;
    			var target = e.target || e.srcElement;
    			document.getElementById("console").innerHTML = "Clicked " + target.id;
    		}
    		ec.onmouseover = function(e) {
    			e = e || window.event;
    			var target = e.target || e.srcElement;
    			document.getElementById("console").innerHTML = "Over " + target.id;
    		}
    		ec.onmouseout = function(e) {
    			e = e || window.event;
    			var target = e.target || e.srcElement;
    			document.getElementById("console").innerHTML = "Out " + target.id;
    		}
    	}
    	</script>
    	<style type="text/css">
    		div{background:silver;padding:10px;}
    		p{background:white;border:1px solid gray;width:50%;}
    	</style>
    </head>
    <body>
    <div id="eventCatcher">
    <p id="p1">First Paragraph</p>
    <p id="p2">Second Paragraph</p>
    <p id="p3">Third Parargraph</p>
    </div>
    <hr />
    <p id="console"></p>
    </body>
    </html>
    I'm using old-style handlers, but you could use listeners instead.

    Yes, with unobtrusive JavaScript you can't see what behaviours a page may have by looking at the html. You can see the content, meaning and structure of the document. I think it's often easier to see what's going on when the layers are separated. It's not so much harder (if at all) to flick between three open text files than to scroll within one mixed up document.

  4. #4
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    r51, Just to thank you for your message and great example! I am still trying to get used to this model since I can see the advantages it offers. Cheers.
    Everardo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •