I was using Drupal behaviors during a commerce project that ran some simple code after a select list changed product value. In my head though I was thinking how is this any different than a 'change' event.

I went through Google to find out a bit more, but could only come across some things that provided very little insight, including the documentation itself.

So I am curious as to why and when to use Drupal behaviors, and if I could get a practical example. And does it only work on Drupal rendered nodes that have asynchronous functionality attached to them? Or can I attach it to anything like a regular div element? If so what would that look like?

I also noticed in the Drupal behaviors object tree, you can see all the behaviors, and are able to run them if you get all the way down to the attach object ( i.e. Drupal.behaviors.myBehavior.attach() ). Can you manipulate those?

Thanks for the insight in advance.


The attach function of all registered behaviors (all properties of the Drupal.behaviors object) will be invoked when behavior should be added to elements, either when the DOM is ready (ie. page load) and when elements are added to the DOM. The detach function will be called when behaviors should be detached from elements: just before elements are removed from the DOM, moved in the DOM or a form is submitted. The context parameter will always be a parent of the added/removed/moved/submitted elements, the single added/removed/moved/submitted element itself or the whole document element. The settings parameters will be the settings for the context, usually the Drupal.settings object as set by calls to drupal_add_js() from PHP. For detach, the trigger parameter will contains the kind of event that triggered the call: 'unload' (elements removed), 'move' (elements moved) or 'serialize' (form is being submitted).

The attach (and detach) functions of a behavior can be used multiple time over the same portion of the DOM tree. So the same element could be processed multiple time by the same code. It is up to the code itself to avoid processing (ie. binding event handlers, altering CSS styles, etc.) multiple times for the same elements. The easiest solution for this is to use the jQuery Once plugin (which is provided by Drupal 7) like this:

$(selector).once('behavior-name', function(){ /*do something*/ });

Since a behavior is being attached/detached to/from a context, the context object can be used to restrict your jQuery queries to only the affected element or DOM subtree, like this:

$(selector, context).doSomething();

Putting all this together means the base pattern to process and add behaviors to elements on the page should looks like this:

(function($) {
  Drupal.behaviors.doSomething = {
    attach: function(context, settings) {
      $('div.something', context).once('do-something').doSomething({
        param1: settings.something.param,
        param2: 'something else'

You can manipulate thhe Drupal.behaviors object tree, but be careful to avoid breaking other behaviors. I common usage is to use your behavior object (ie. Drupal.behaviors.myBehavior) to store information extracted from the elements during attach and consumed by event handlers.

If you write code that dynamically add or remove elements to the DOM, you should invoke Drupal.attachBehaviors or Drupal.detachBehavior on the (closet) parent element of the added/removed elements.

| improve this answer | |

Here is an extensive tutorial I wrote on the Drupal 7 JS API. It includes a detailed explanation of what behaviors are, how they are used, what calls them, and caveats to watch out for: https://www.jaypan.com/tutorial/high-performance-javascript-using-drupal-7s-javascript-api

The tutorial finishes up with a use-example of behaviors, and how they work.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.