CodeSOD: Quite the Event

A few years back, Alvin was in college, and took his first formal summer job as a programmer. It was supposed to be just some HTML layout work, and the designer handed him a few sample pages. "Just do it like this."

The "sample pages" were a mishmash of random indentation, huge swathes of commented out code, and all those other little traits of "someone's just coding in production, aren't they?" that crop up in files. Still, it was just some HTML layout work, so how hard could it be?

Not too hard- until Alvin started popping up the DOM inspector. Every time he opened debugging windows in his browser, the page started misbehaving. Menus stopped staying popped open, or would pop open at seemingly random intervals. He could refresh, and it would go away, but the next time he opened (or closed) the DOM inspector, the problems would come back.

In the one JavaScript file in the project, Alvin found this:

$(document).ready(websitefunction);$(window).resize(websitefunction);function websitefunction(){ $.slidebars(); $('select').each(function(){ back_position = $(this).width()-20; back_position1 = back_position+'px 13px'; $(this).css('background-position',back_position1); }); $('.btn-default').click(function(){ $(this).parent().find('.btn-default').removeClass('active'); $(this).addClass('active'); }); $('.slb_btn1').click(function(){ $('.slb_row1').show(); }); $('.slb_btn2').click(function(){ $('.slb_row1').hide(); $('.slb_row2').show(); }); $('.slb_btn3').click(function(){ $('.slb_row2').hide(); }); $('.slb_btn4').click(function(){ $('.slb_row2').show(); }); if($(document).width()>770){ $('.submenu').width($(document).width());for(i=1;i<5;i++){ arrow_left = $('.sub_'+i).offset().left+ $('.sub_'+i).width()/2; $('.arrow'+i).css({'left':arrow_left});} $('.sub_1').mouseover( function(){ $('.submenu').hide(); $('.pro_service').slideDown(100) }); $('.sub_2').mouseover( function(){ $('.submenu').hide(); $('.clien_parner').slideDown(100) }); $('.sub_3').mouseover( function(){ $('.submenu').hide(); $('.help_service').slideDown(100) } ) $('.sub_4').mouseover( function(){ $('.submenu').hide(); $('.my_profile').slideDown(100) } ); $('.submenu').click(function(e){ e.stopPropagation(); }); $(document).click(function(){ $('.submenu').slideUp(100); });}}

There's a lot to dislike about this wall of event handler registrations, but it's the first two lines that really tell us the story:

$(document).ready(websitefunction);$(window).resize(websitefunction);

When the document is ready, invoke the websitefunction which registers all the event handlers. This is a reasonable and normal thing to do. When the window is resized- we do the same thing, without clearing out any of the existing event handlers. Each time the window gets resized (whether by pulling up debugging tools or by just resizing the browser window) we duplicate the existing event handlers.

If nothing else, Alvin learned some examples of what not to do on that summer job.

[Advertisement] Utilize BuildMaster to release your software with confidence, at the pace your business demands. Download today!