Étiquette : DOM

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

01/02/2022 / admin

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

déléguer un événement à un élément du DOM créé dynamiquement
détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

<div id="combinationSummaryList">
    <a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>
    <a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a> <!-- la délégation d'événement sert pour cet élément -->
</div>

<a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>

<a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a>

</div>

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-link' ) ) return;
    event.preventDefault();
    // code à exécuter
}, false );

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-link' ) ) return;

event.preventDefault();

// code à exécuter

}, false );

Javascript dans le cas d’un SVG:

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;
        event.preventDefault();
        const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );
}, false );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;

event.preventDefault();

const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );

}, false );

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

11/01/2022 / admin

Source: Pure javascript method to wrap content in a div

function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar
let $_OFFCANVAS_BAR = document.createElement( 'div' );
$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

function wrap(el, wrapper) {

el.parentNode.insertBefore(wrapper, el);

wrapper.appendChild(el);

}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar

let $_OFFCANVAS_BAR = document.createElement( 'div' );

$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

[jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants

10/12/2020 / admin

Cette méthode fait écho à tous les posts dans différents blogs et forums qui incitent à utiliser la méthode .unwrap() de jQuery. La méthode .contents() récupère absolument tout ce que contient l’élément parent qu’on souhaite supprimer alors qu'.unwrap() se montre plus sélective, ce qui peut entrainer quelques désagréments (perte de contenu, etc…).

Source: How to remove only the parent element and not its child elements in JavaScript?

HTML:

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

<div>

pre text

<p>child foo</p>

<p>child bar</p>

nested text

</div>

post text

</div>

jQuery:

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

1 2	var cnt = $(".remove-just-this").contents(); $(".remove-just-this").replaceWith(cnt);

Résultat dans le DOM:

<div>
  pre text
  <p>child foo</p>
  <p>child bar</p>
  nested text
  post text
</div>

<div>

pre text

<p>child foo</p>

<p>child bar</p>

nested text

post text

</div>

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

12/02/2020 / admin

Attention: l’article et le code ci-dessous ne sont valables qu’au document ready. Ceci signifie qu’au chargement de la page seulement, on va vérifier la disponibilité d’un ou plusieurs éléments dans le DOM. Les sources ne concernent pas l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Pour cette deuxième fonctionnalité, se référer à la documentation de Mutation Observer sur developer.mozilla.org et un exemple d’utilisation ici: [Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur.

Source: Using Mutation Observers to Watch for Element Availability. Code source sous GIT. Version PDF pour la postérité.

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

11/10/2017 / admin

Edit 11/02/2020: DOMSubtreeModified est désormais déprécié au profit de MutationObserver.

Mes propres expériences avec les MutationObserver:

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

Pour surveiller les changements sur un élément du DOM avec jQuery, on va souvent vous renvoyer vers l’utilisation de l’événement .on('change', ...) ou des MutationObserver, mais il y a plus simple avec l’événement .bind('DOMSubtreeModified', ...).

Source: jQuery watch for domElement changes?. Demo JSfiddle.net – Listen DOM Changes using jQuery.

Edit 12/07/2018: j’ai remplacé la méthode .bind() aujourd’hui dépréciée par .on().

$('#content').on('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

$('#content').on('DOMSubtreeModified', function(e) {

if (e.target.innerHTML.length > 0) {

// Content change handler

}

});

[jQuery] Détecter un changement dans le contenu d’un élément HTML (plug-in)

12/08/2015 / admin

Source : Stack Overflow – jQuery watch div.
Simulation JS Fiddle.

Le plug-in

jQuery.fn.contentChange = function(callback){
  var elms = jQuery(this);
  elms.each(
    function(i){
      var elm = jQuery(this);
      elm.data("lastContents", elm.html());
      window.watchContentChange = window.watchContentChange ? window.watchContentChange : [];
      window.watchContentChange.push({"element": elm, "callback": callback});
    }
  )
  return elms;
}
setInterval(function(){
  if(window.watchContentChange){
    for( i in window.watchContentChange){
      if(window.watchContentChange[i].element.data("lastContents") != window.watchContentChange[i].element.html()){
        window.watchContentChange[i].callback.apply(window.watchContentChange[i].element);
        window.watchContentChange[i].element.data("lastContents", window.watchContentChange[i].element.html())
      };
    }
  }
},500);

jQuery.fn.contentChange = function(callback){

var elms = jQuery(this);

elms.each(

function(i){

var elm = jQuery(this);

elm.data("lastContents", elm.html());

window.watchContentChange = window.watchContentChange ? window.watchContentChange : [];

window.watchContentChange.push({"element": elm, "callback": callback});

}

)

return elms;

}

setInterval(function(){

if(window.watchContentChange){

for( i in window.watchContentChange){

if(window.watchContentChange[i].element.data("lastContents") != window.watchContentChange[i].element.html()){

window.watchContentChange[i].callback.apply(window.watchContentChange[i].element);

window.watchContentChange[i].element.data("lastContents", window.watchContentChange[i].element.html())

};

}

},500);

Le code HTML

<p>Testing it:  (click on divs to change contents)</p>

<div id="a" onclick="$(this).append('i')">Hi</div>
<div id="b" onclick="$(this).append('o')">Ho</div>
<div class="c" onclick="$(this).append('y')">He</div>
<div class="c" onclick="$(this).append('w')">He</div>
<div class="c" onclick="$(this).append('a')">He</div>

<p>Testing it: (click on divs to change contents)</p>

Utiliser le plug-in

function showChange(){
  var element = $(this);
  alert("it was '"+element.data("lastContents")+"' and now its '"+element.html()+"'");
}

$('#a').contentChange(function(){  alert("Hi!") });
$('div#b').contentChange( showChange );
$('.c').contentChange(function(){  alert("He he he...") });

function showChange(){

var element = $(this);

alert("it was '"+element.data("lastContents")+"' and now its '"+element.html()+"'");

}

$('#a').contentChange(function(){ alert("Hi!") });

$('div#b').contentChange( showChange );

$('.c').contentChange(function(){ alert("He he he...") });

Si le plug-in s’arrête de fonctionner après le 1er changement dans le DOM

Dans notre exemple, au clic sur une des options d’un élément HTML select :

jQuery('body').on('click', 'select#product-declination > option', function(){
  jQuery('div#b').contentChange( showChange );
});

jQuery('body').on('click', 'select#product-declination > option', function(){

jQuery('div#b').contentChange( showChange );

});

Articles récents

Catégories

Archives

Méta

Étiquette : DOM

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

Javascript dans le cas d’un SVG:

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

[jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants

HTML:

jQuery:

Résultat dans le DOM:

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

[jQuery] Détecter un changement dans le contenu d’un élément HTML (plug-in)

Le plug-in

Le code HTML

Utiliser le plug-in

Si le plug-in s’arrête de fonctionner après le 1er changement dans le DOM