Impossibile aggiungere eventi click per elencare gli articoli

Questa è la mia prima incursione nell'uso di Javascript con HTML. Sto cercando di aggiungere eventi di clic agli elementi dell'elenco in un elenco ordinato, ma qualcosa sul modo in cui sto facendo non funziona. Qualcuno può far luce su questo per me?Impossibile aggiungere eventi click per elencare gli articoli

Creo una funzione nel mio head che dovrebbe delegare tutti gli eventi di clic sugli elementi di un elenco specifico a una determinata funzione e in tale funzione cerco di generare un semplice avviso con il testo dell'elemento di elenco. Alla fine voglio fare di più, ma sto solo cercando di ottenere i semplici eventi click per funzionare prima.

<html> 
    <head> 
    <script type="text/javascript"> 
     // Attach an event handler to the 'topfriends' list to handle click events. 
     function attachEventHandlerToList() { 
      document.getElementById("#top4list").delegate("li", "click", function(clickEvent) { 
       alert(this.innerHTML()); 
      }); 
     } 
    </script> 
</head> 

<body> 

    <div id="topfriends"> 
     <h3>Top 4 Most Friendable Friends</h3> 
     <ol id="top4list" onload="attachEventHandlerToList()"> 
      <li>Brady</li> 
      <li>Graham</li> 
      <li>Josh</li> 
      <li>Sean</li> 
     </ol> 
    </div> 
</body>

fonte

2013-07-14 DesAdams

Facciamo qualcosa di simile

<ul id="parent-list"> 
    <li id="a">Item A</li> 
    <li id="b">Item B</li> 
    <li id="c">Item C</li> 
    <li id="d">Item D</li> 
    <li id="e">Item E</li> 
    <li id="f">Item F</li> 
</ul>

Ora scrivere il codice JavaScript per questo

<script type="text/javascript"> 
    // locate your element and add the Click Event Listener 
    document.getElementById("parent-list").addEventListener("click",function(e) { 
     // e.target is our targetted element. 
        // try doing console.log(e.target.nodeName), it will result LI 
     if(e.target && e.target.nodeName == "LI") { 
      console.log(e.target.id + " was clicked"); 
     } 
    }); 
</script>

Si prega di fare riferimento a questo write-up su JavaScript per eventi delegati http://davidwalsh.name/event-delegate

Inoltre, al di sotto di collegamento è il violino che ho creato http://jsfiddle.net/REtHT/

speranza che questo aiuti!

fonte

2013-07-14 03:04:50 Cooshal

Ah, anche questo funziona! E scommetto che è più efficiente dell'assegnazione di singoli eventi di clic a ciascun elemento dell'elenco, che è quello che stavo cercando di evitare usando 'delegate()'. – DesAdams

Ma aspetta! Come posso ottenere il testo all'interno dell'elemento dell'elenco? Usando 'e.target.id' si ottiene l'id del' li', giusto? Alla fine genererò questa lista e 'e.target.innerHTML' non stampa nulla. – DesAdams

Nevermind, 'innerHTML' funziona totalmente. Immagino di averlo sbagliato a scrivere o di non aver salvato le modifiche lol.Colpa mia! – DesAdams

-1

Ciao perché non farlo più facile sostituendo onLoad directy da onClick

<script type="text/javascript"> 
function olClicked(){ 
alert(this.innerHTML()); 
} 
</script> 
<ol id="top4list" onClick="olClicked()">

fonte

2013-07-14 02:41:00

ottengo un errore di tipo quando provo questo. 'questo' è apparentemente la finestra, non la voce dell'elenco. Il motivo per cui stavo usando delegato è perché ho bisogno di specificare un comportamento diverso per ogni elemento della lista. – DesAdams

delegate() è un metodo jQuery deprecato, e nessuno di questi metodi esiste in pianura JS.
Per allegare un gestore di eventi in JS usereste addEventListener, e per le vecchie versioni di IE avrete bisogno attachEvent così, ecco perché è un po 'difficile con i gestori di eventi cross browser.
onclick, onmouseenter ecc. Funzionerà in tutti i browser, ma è consigliabile utilizzare lo standard addEventListener/attachEvent.

Inoltre, è necessario eseguire lo script dopo gli elementi vengono aggiunti al DOM, altrimenti non sono disponibili. Il solito modo è inserire lo script dopo gli elementi, o usare un gestore di eventi DOM ready.

<html> 
<head> 
    <title>test</title> 
</head> 

<body> 

<div id="topfriends"> 
    <h3>Top 4 Most Friendable Friends</h3> 
    <ol id="top4list"> 
    <li>Brady</li> 
    <li>Graham</li> 
    <li>Josh</li> 
    <li>Sean</li> 
    </ol> 
</div> 

<script type="text/javascript"> 
    var lis = document.getElementById("top4list").getElementsByTagName('li'); 

    for (var i=0; i<lis.length; i++) { 
     lis[i].addEventListener('click', doStuff, false); 
    } 

    function doStuff() { 
     alert(this.innerHTML); 
    } 
</script> 
</body>

FIDDLE

fonte

2013-07-14 02:45:57 adeneo

Grazie per il consiglio! Farò un tentativo. Questa è davvero la prima volta che aggiungo un comportamento al mio HTML, quindi non conosco nulla di troppo dettagliato sulla gestione degli eventi. Inoltre, il progetto che stavo testando per questo utilizza JQuery, quindi ho pensato che il metodo delegate() andasse bene, ma suppongo di dover richiedere la libreria o qualcosa del genere quando lo uso? Anch'io sono nuovo di JS. – DesAdams

Funziona completamente, grazie! – DesAdams

Impossibile aggiungere eventi click per elencare gli articoli

risposta

Problemi correlati