Javascript – la freccia funziona nel gestore di eventi?

Sono nuovo di ES6 e non riesco a farlo funzionare correttamente:

$(this) restituisce undefined al clic?

 dom.videoLinks.click((e) => { e.preventDefault(); console.log($(this)); var self = $(this), url = self.attr(configuration.attribute); eventHandlers.showVideo(url); // Deactivate any active video thumbs dom.videoLinks.filter('.video-selected').removeClass('video-selected'); // Activate selected video thumb self.addClass('video-selected'); }); 

Tuttavia se lo cambio non è una funzione di freccia come questa, funziona come previsto ?:

 dom.videoLinks.click(function(e) { e.preventDefault(); console.log(this); console.log($(this)); var self = e.this, url = self.attr(configuration.attribute); eventHandlers.showVideo(url); // Deactivate any active video thumbs dom.videoLinks.filter('.video-selected').removeClass('video-selected'); // Activate selected video thumb self.addClass('video-selected'); }); 

Quindi, come dovrei farlo se utilizzo una funzione di freccia nel callback?

Con la funzione freccia come callback, anziché utilizzare this per ottenere l’elemento a cui è associato il gestore, è necessario utilizzare event.currentTarget .
Il valore di this all’interno di una funzione di freccia è determinato da dove è definita la funzione di freccia, non da dove viene utilizzata .
Quindi, da ora in poi, tieni presente che event.currentTarget fa sempre riferimento all’elemento DOM cui EventListeners sono attualmente in fase di elaborazione.


.currentTarget vs .target

Utilizza event.currentTarget invece di event.target causa dell’evento bubbling / capture :

  • event.currentTarget – è l’elemento a cui è collegato il listener di eventi.
  • event.target – è l’elemento che ha triggersto l’evento.

Dalla documentazione:

currentTarget di tipo EventTarget , EventTarget Utilizzato per indicare il EventTarget cui EventListeners sono attualmente in fase di elaborazione. Questo è particolarmente utile durante la cattura e il bubbling .

Controlla l’esempio di base nello snippet seguente

 var parent = document.getElementById('parent'); parent.addEventListener('click', function(e) { document.getElementById('msg').innerHTML = "this: " + this.id + "
currentTarget: " + e.currentTarget.id + "
target: " + e.target.id; }); $('#parent').on('click', function(e) { $('#jQmsg').html("*jQuery
this: " + $(this).prop('id') + "
currenTarget: " + $(e.currentTarget).prop('id') + "
target: " + $(e.target).prop('id')); }); $('#parent').on('click', e => $('#arrmsg').html('*Arrow function
currentTarget: ' + e.currentTarget.id));
 #parent {background-color:red; width:250px; height:220px;} #child {background-color:yellow;height:120px;width:120px;margin:0 auto;} #grand-child {background-color:blue;height:50px;width:50px;margin:0 auto;} #msg, #jQmsg, #arrmsg {font-size:16px;font-weight:600;background-color:#eee;font-family:sans-serif;color:navy;} 
  
Parent-(attached event handler)

Child

Grand Child



Non lo faresti.

La modifica del valore di this è il punto principale dell’utilizzo di una funzione freccia.

Se non si desidera farlo, una funzione di freccia è lo strumento sbagliato per il lavoro.

Puoi usare $(event.target) invece di $(this) anche all’interno di una funzione freccia. Le funzioni della freccia stanno preservando l’ambito in cui sono stati definiti. Nel tuo caso non è undefined .

funzioni di freccia e questo selettore?

Le funzioni di freccia mantengono this dal contesto. Per esempio.

 obj.method = function(){ console.log(this); $('a').click(e=>{ console.log(this); }) }; obj.method(); // logs obj $('a').click(); // logs obj 

Quindi, come dovrei farlo se utilizzo una funzione di freccia nel callback?

Già puoi – per accedere all’evento target puoi usare qualcosa come $(e.target) , ma $(e.target) attenzione ai bubbling. Quindi consiglio di usare le normali funzioni come callback.