js-behaviors.js

// dependencies:
//  - core/jquery
//  - core/drupal
//  - core/once
// https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview

(function ($, Drupal, once) {
'use strict';

  Drupal.behaviors.myCustomBehavior = {
    // Calls to a behavior object's attach method receive two arguments; context, and settings. The context argument contains DOM elements to act on, and the settings object contains any JavaScript settings added by Drupal/PHP
    attach: function (context, settings) {
      // Seleccionar un elemento.
      $("<selector>", context)...
      
      // Using once() to apply the myCustomBehaviour effect when you want to run just one function.
      // IMPORTANT: Check if the body is in the 'context' variable. If not, delete the context variable.
      // More info: https://www.drupal.org/node/3158256
      once('myCustomBehavior', 'body', context).forEach( function (element) {
        // Apply the myCustomBehavior effect to the elements only once.
      })
      // Using the .once() will make sure the code only runs once. Otherwise, the code will be executed on every AJAX request.
      // It adds a 'processed' class to the data-once attr (<body... data-once="... myCustomBehavior">) in order to accomplish this (core/once).
    },
    detach: function (context, settings, trigger) {
      // detach: Alongside attach lives detach, which can be used to detach registered behaviors from a page element. Besides from a context and settings, it also expects a trigger. The trigger is a string containing the causing of the behavior to be detached. Possible causings are:
      // - unload: (default) The context element is being removed from the DOM.
      // - move: The element is about to be moved within the DOM (for example, during a tabledrag row swap). After the move is completed, Drupal.attachBehaviors() is called, so that the behavior can undo whatever it did in response to the move. Many behaviors won't need to do anything simply in response to the element being moved, but because IFRAME elements reload their "src" when being moved within the DOM, behaviors bound to IFRAME elements (like WYSIWYG editors) may need to take some action.
      // - serialize: When an Ajax form is submitted, this is called with the form as the context. This provides every behavior within the form an opportunity to ensure that the field elements have correct content in them before the form is serialized. The canonical use-case is so that WYSIWYG editors can update the hidden textarea to which they are bound.
    }
  };
})(jQuery, Drupal, once);

// DON'T WORK (Only drupal 7). See (https://ambientimpact.com/web/snippets/drupal-8-behaviors-and-jquery-once).
Drupal.behaviors.exampleBehavior = {
  attach: function(context, settings) {
    $('.example', context).once('myCustomBehavior', function() {
      // Do stuff.
    });
  },
  detach: function(context, settings, trigger) {
    $('.example', context).removeOnce('myCustomBehavior', function() {
      // Undo stuff.
    });
  }
};
// Instead use: (Drupal 8).
Drupal.behaviors.exampleBehavior = {
  attach: function(context, settings) {
    once('myCustomBehavior', '.example', context).forEach( function (element) {
      // Do stuff.
    });
  },
  detach: function(context, settings, trigger) {
    once('myCustomBehavior', '.example', context).forEach( function (element) {
      // Undo stuff.
    });
  }
};