Ambito variabile Javascript nella funzione anonima addEventListener

Quando si fa clic su ciascun div, deve essere visualizzato “1” se si fa clic su div 1 o su “5” se si fa clic su div 2. Ho cercato di rendere questo codice il più semplice ansible perché è necessario in un’applicazione molto più grande.

   #div1 { background-color: #00ff00; margin: 10px; padding: 10px; } #div2 { background-color: #0000ff; margin: 10px; padding: 10px; }   function init() { var total = 1; var div1 = document.getElementById('div1'), div2 = document.getElementById('div2'); var helper = function(event, id) { if (event.stopPropagation) event.stopPropagation(); if (event.preventDefault) event.preventDefault(); alert('id='+id); } div1.addEventListener('click', function(event) { helper(event, total); }, false); total += 4; div2.addEventListener('click', function(event) { helper(event, total); }, false); }    
1
2

Grazie per l’aiuto! 🙂

    Il problema è che gli ascoltatori di eventi e “totale” esistono entrambi nello stesso ambito (init ())

    Le funzioni degli eventi fanno sempre riferimento al totale all’interno dell’ambito init (), anche se viene modificato dopo la dichiarazione delle funzioni degli eventi

    Per aggirare questo problema, le funzioni degli eventi devono avere un “totale” nel proprio ambito che non cambierà. È ansible aggiungere un altro livello di ambito utilizzando una funzione anonima

    Per esempio:

     (function (total) { div1.addEventListener('click', function(event) { helper(event, total); }, false); }(total)); total += 4; (function (total) { div2.addEventListener('click', function(event) { helper(event, total); }, false); }(total)); 

    Le funzioni anonime vengono passati come valore “totale” corrente di init () come parametro. Questo imposta un altro ‘totale’ per l’ambito della funzione anonima, quindi non importa se le modifiche totali di init () o meno, perché la funzione di evento PRIMA farà riferimento all’ambito della funzione anonima.

    Modificare:

    Inoltre, è necessario inserire un punto e virgola dopo la parentesi di chiusura della funzione di supporto, altrimenti lo script si lamenterà che “evento” non è definito.

     var helper = function(event, id) { if (event.stopPropagation) event.stopPropagation(); if (event.preventDefault) event.preventDefault(); alert('id='+id); }; 

    Questo è quasi lo stesso, ma penso che sarà meglio:

     div1.addEventListener('click', function(t){ return function(event) { helper(event, t); }}(total), false); 

    invece di:

     (function (total) { div2.addEventListener('click', function(event) { helper(event, total); }, false); }(total));