AddEventListener passare informazioni

di il
1 risposte

AddEventListener passare informazioni

Ciao a tutti
Vorrei eliminare l'abitudine che ho di utilizzare onclick e sto leggendo molto su addEventListener
Ho capito come utilizzarlo e dichiararlo in vari contesti ma c'è un contesto dove non ho capito se si può utilizzare oppure no con il passaggio di parametri, sto leggendo da ore dappertutto ma non riesco a cavarne piede.

Mettendo il caso di avere vari
<div id="a">
<p name = "a" id="a1" onclick="mia_funzione(this.id)></p>
<p name = "a" id="a2" onclick="mia_funzione(this.id)></p>
</div>
<div id="b">
<p name = "b" id=" b1" onclick="mia_funzione(this.id)></p>
<p name = "b" id="b2" onclick="mia_funzione(this.id)></p>
</div>
ecc

io prima utilizzavo ci infilavo un onclick all'interno di ogni <p> che puntavano ad una funzione alla quale passavo l'id e sapevo da quale div e da quale p proveniva il click.
Ma mi rendo che è uno schifo

usando però addEventListener, ho capito come creare un addEventListener per ognuno, anche utilizzando un for con il queryselectorall ma diventa una cosa infinita, e non credo sia una cosa fatta bene

si può creare un addEventListener che gestisca tutto il div? in modo tale che intercetti il div dal quale proviene il click e il <p> che viene cliccando?
Oppure non si può fare?

Perché c'ero stanotte e tutta la mattina leggendo addEventListener ma tutti gli esempi sono con parametri passati "a mano"... così lo so fare anche io...

Nello specifico questo è il codice che utilizzavo
var elenco_numero_ordine = new Array;
var D = document.getElementsByClassName('order-details');
for(var i = 0; i < D.length; i++){
    var x = D[i].textContent.split(":");
    var numero_ordine = elenco_numero_ordine[i] = x[1];
    D[i].innerHTML +=
        "<p class="+elenco_numero_ordine[i]+" id='o02'>Ordinario 0-2Kg (€1,28)</p>"+
        "<p class="+elenco_numero_ordine[i]+" id='o25:"+numero_ordine+"' onclick='seleziona_spedizione(this.class);'>Ordinario 2-5Kg (€3,93)</p>"+
        "<p class="+elenco_numero_ordine[i]+" id='R02:"+numero_ordine+"' onclick='seleziona_spedizione(this.id);'>Raccomandata 0-2Kg (€4,63)</p>"+
        "<p class="+elenco_numero_ordine[i]+" id='R25:"+numero_ordine+"' onclick='seleziona_spedizione(this.id);'>Raccomandata 2-5Kg (€7,30)</p>"+
        "<p class="+elenco_numero_ordine[i]+" id='pacco_poste:"+numero_ordine+"' onclick='seleziona_spedizione(this.id);'>Pacco Poste</p>"+
        "<p class="+elenco_numero_ordine[i]+" id='pacco_corriere:"+numero_ordine+"' onclick='seleziona_spedizione(this.id);'>Pacco Corriere</p>"+
        "<p class="+elenco_numero_ordine[i]+" id='consegna_mano:"+numero_ordine+"' onclick='seleziona_spedizione(this.id);'>Consegna a Mano</p>"+
        "<p class="+elenco_numero_ordine[i]+" id='attendere_spedizione:"+numero_ordine+"' onclick='seleziona_spedizione(this.id);'>Attendere Spedizione</p>"
    ;
}

window.seleziona_spedizione = function(spedizione){
    alert(spedizione);
}

considerando poi che dopo un po' che lo uso, la funzione non funziona più e devtools mi scrive:
seleziona_spedizione is not defined
at HTMLParagraphElement.onclick


(FORSE) credo di aver capito qualcosa in più con questo codice
(perché alert(e.currentTarget.id); funziona mentre alert(e.currentTarget.name); mi dà undefined?
ah ok devo utilizzare alert(e.currentTarget.getAttribute('name'));
(che casino )
<p id="babab" name="aaaa">ciao</p>
<p id="ieiwei" name="bbbb">Arrivederci</p>
<script>
function prova(e){
  alert(e.currentTarget.id);
}

var ps = document.getElementsByTagName('p');

for(var i = 0; i < ps.length; i++){

  ps[i].addEventListener('click', prova, false);
}
document.body.addEventListener('click', prova, false);


</script>
Grazie
(Alka, umiliami! )

1 Risposte

  • Re: AddEventListener passare informazioni

    Separare la vista dalla logica è sempre buona cosa, ricorda che il tag name non è supportato dal tag "<P>", questo è un piccolo esempio di come potresti risolvere il tuo piccolo problema. Ciao
    
     <div class="container">
                <div id="a">
                    <p id="a1">a1</p>
                    <p id="a2">a2</p>
                </div>
    
                <div id="b">
                    <p id="b1">b1</p>
                    <p id="b2">b2</p>
                </div>
            </div>
            <div id="result"></div>
    
            <script>
                const myP = document.querySelectorAll(".container > div > p")
                const result = document.getElementById("result")
    
                myP.forEach((pElement, idx) => {
                    pElement.addEventListener("click", (e) => {
                        result.textContent = `parent: ${myP[idx].parentNode.id} children: ${e.target.id}`
                    })
                })
            </script>
    
Devi accedere o registrarti per scrivere nel forum
1 risposte