Onload versus onclick event handler

[CzechBoy]

1) Script Title:
Dynamic ajax content

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:
I use this:

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

to load ajaxpage. is there any similar function for onclick (like function addOnclickEvent) event?
I ask because I load (onload) very slow php code and meanwhile I can start working, but when I click on link (I use link by onclick="ajaxpage...") it waits till the slow php code is done and then it loads itself so I guess there is conflict between onload handler and onclick handler...
Thanks for help

[jscheuer1]

function addOnclickEvent(fnc, el){
var el=typeof el=='object'? el : document.all? document.all[el] : document.getElementById(el);
  if ( typeof el.addEventListener != "undefined" )
    el.addEventListener( "click", fnc, false );
  else if ( typeof el.attachEvent != "undefined" ) {
    el.attachEvent( "onclick", fnc );
  }
  else {
    if ( el.onclick != null ) {
      var oldOnclick = el.onclick;
      el.onclick = function ( e ) {
        oldOnclick( e );
        el[fnc]();
      };
    }
    else
      el.onclick = fnc;
  }
}

Note: The parameter el passed to the function is the element or its id.

[CzechBoy]

Thank you very much! One small question:
can't I just use "this" instead of "el"?
Am I right when using it as?:

<a onclick="addOnclickEvent(ajaxpage..., this)"></a>

[jscheuer1]

Try it out, it should work that way. However, the new onclick event may not fire until the next time that element is clicked and (in IE at least), another instance of the new event will get added each time it is clicked. This can cause problems if it is done enough times.

Why are you doing this anyway? You may want to look at:

http://www.dynamicdrive.com/forums/s...ad.php?t=17426

and:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

Both of which outline ways to initialize dynamically imported content that would have been initialized onload if it were hard coded content.

[CzechBoy]

Well I thought there could be conflict between onload and onclick event... not between two onclick events... But thanks for links, I will read them carefully

[jscheuer1]

Whether it's onclick or onload isn't the point. With the code you originally had, any number of onload events could be assigned to the same page. With the modified code, any number of onclick events could be assigned to the same element.

The point with the onclick handler is when and how you assign it to the element. If you are assigning it onclick of that element, technically it isn't becoming a part of the onclick event for that element until that element is clicked. But, since the code is adding the new event to the element's onclick event (not overwriting it), it will add the new event again to that same element each time that element is clicked. Click the element 100 times, you get 100 onclick events for that element.

Now, the addEventListener (most browsers) will usually only add the event once but, the attachEvent (IE) will attach it over and over again. In IE this can result in a memory drain.

However, the goal really is to add the onclick event only once and this preferably would be (in most cases) sometime after the element begins to exist but before it is clicked for the first time.