Dynamically assign functions to mouse or other events

Posted on by

Have you ever wanted to assign a function to an onload or onclick event, based on some condition or even from another page?

A project where this came in handy was a multi-page learning module. Each page has previous and next buttons in the header and footer, except for the first and last pages, where the Previous and Next buttons would be hidden as appropriate. Here is the code used to blank out the “previous” button on the first page. 

 //if this is page 1
if (parent.data.pageNumber==1){ 
//set the source for both header and footer "previous" button images to a blank image.
       document.getElementById('hdrPrevBtn').src = 'images/hdr_Prev_btnBlank.jpg';
       document.getElementById('ftrPrevBtn').src = 'images/footer_Prev_btnBlank.jpg';
//then assign an empty function to the onmouseover event. This will override whatever is currently set for the onmouseover event.
   document.getElementById('headerPrev').onmouseover= function(){ };
   document.getElementById('footerPrev').onmouseover=function(){ };
 }