Searching online docs so far and I've found much about Drupal Behaviors running when the DOM is ready i.e. the ready JQuery function.
But what about for example if I want my JQuery code to run once all the images have loaded? Now, I could use the JQuery load function, but this is apparently not recommended to use such Jquery functions JQuery directly in Drupal but work within Behaviors instead - but these are no good to me if they only run on DOM ready event.
Thoughts?
Using .load() on element to attach event handler in your behaviors should not be a problem. Using it directly to window outside a behavior, for instance to wait for all images to be loaded, should be okay too.
As pointed by Clive in the comment, Drupal behaviors are to be used in replacement of $.ready(), not $(window).load(). However, if content (ie. new DOM elements) is added to the page after page load (AJAX calls, content generated from JavaScript, etc.), handlers for $.ready() will not be called and will not have a chance to process the added DOM elements. While the attach() method of all behaviors is also called when this happen. With a parent of the added DOM elements as context.
Behaviors can also have a detach() method which is called when DOM element are removed or before form serialization. This us, for instance, used to properly destroy WYSIWYG editors when their textarea are removed from the DOM and to prepare the POSTed data hen their form are submitted.
Off course, this rely on the JavaScript doing the addition/removal/serialization to properly call Drupal.attachBehaviors() and Drupal.detachBehabiors(). Something that is done by Drupal core (including form handling and the Drupal AJAX Framework) and properly written contrib modules.
I'm not familiar with the load event and its behavior with content added after the first time it is triggered. If it does not fire multiple times, re-registering the handler in a behavior attach() method may be required to ensure newly added image are also processed.
Drupal.attachBehaviors()). When Drupal replaces parts of your page which contain elements that have JS events bound to them, those bindings obviously get lost. With behaviors it's easy to get those events re-attached. It does the same sort of task as jQuery.on(), but keeps everything under the Drupal namespace
jQuery.on() attach handlers to elements, Drupal.attachBehaviors() invoke all behaviors' attach() methods in order for them to process newly available DOM elements. Processing could include attaching handlers, but are not restricted to attaching handlers. A behaviors can be used, for instance, to alter all links element and add class to those referencing an external page.
Commented
Feb 6, 2014 at 14:55
$(window).load()? I'd be interested to read that, sounds nuts to me :)ready.$.ready()isn't functionally equivalent to$(window).load()though (not even close), so I would take all of those "recommendations" with just the smallest pinch of salt. I guess you could arguably put your$(window).load()inside the behavior wrapper but that doesn't feel any better to me (it's not like the window is going to be able to reload in any meaningful way in response to Drupal's AJAX). If it helps at all, I use the$(window).load()method outside of behaviors all the time, and I can't recall ever seeing a problem