Dall'archivio script > HTML5

Gestione degli eventi nei Web component HTML

di Morgan PizziniMorgan Pizzini, in HTML5,

Nello script precedente non siamo stati del tutto sinceri riguardo i Web Component e la gestione degli eventi. Quello che abbiamo creato, e che ripresentiamo qui di seguito

// HTML <my-button id="myButton"></my-button> 

var button = document.getElementById('myButton');
button.addEventListener('click', () => {  
  alert('Hai cliccato il pulsante!');  
});


non è un evento che si collega direttamente al click del bottone, presente nel Web component, ma è un evento di click sull'elemento HTML "my-button". Per essere più chiari e fare un ulteriore esempio: avremmo potuto inserire anche del testo e l'evento si sarebbe scatenato ugualmente.

Per riuscire a gestire gli eventi generati all'interno del componente, dalla pagina che lo contiene, abbiamo bisogno di eseguire un dispatchEvent, che permetta di informare il DOM riguardo un particolare avvenimento, e di creare dei subscribers o listeners che si mettano in attesa di tale evento.

Modifichiamo il codice come segue: 

// javascript web component
class MyButton extends HTMLElement {  
  constructor() {  
    // [...codice precedente]

    button.addEventListener('click', () => {
      console.log('Hai cliccato su Button - da WebComponent');
      this.dispatchEvent(new CustomEvent('buttonClick'));
    });

    // Aggiunta a shadow DOM
    [...]
  }  
}

In conclusione, nel Javascript della pagina, ci mettiamo in ascolto di un evento chiamato "buttonClick" emanato proprio dal Web component

var button = document.getElementById('myButton');

// button.addEventListener('click', () => {  
//   alert('Hai cliccato il pulsante!');  
// });  

button.addEventListener('buttonClick', () => {
      console.log('Hai cliccato su Button 1 - da Pagina HTML');
});

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi