addEventListener vs OnClick in JavaScript
Durante la creazione di pagine Web per un sito Web, può esserci un requisito per posizionare alcune funzionalità aggiunte per funzionalità migliorate. Ad esempio, nel caso dei test di automazione, controllare il funzionamento di varie funzionalità al trigger dell'evento. In tali casi, JavaScript fornisce due importanti tecniche che aiutano a rendere accessibile un design di documento complessivo come metodo AddeventListener () ed evento OnClick.
Questo manuale confronterà teoricamente e praticamente l'evento di AddeventListener e OnClick.
addEventListener vs OnClick in JavaScript
In JavaScript, il "addEventListener ()Metodo e il "al clic"L'evento funziona entrambi per un evento e può eseguire una funzione di callback quando si fa clic su un pulsante. Tuttavia, non sono completamente gli stessi.
Il metodo AddeventListener () include un evento nel suo argomento. Inoltre, può applicare più gestori di eventi allo stesso elemento e non sovrascrive contemporaneamente i gestori di eventi. Mentre l'evento OnClick viene attivato quando l'utente fa clic sul pulsante corrispondente contro l'evento. È solo una proprietà dell'oggetto HTMlelement e può essere sovrascritto, a differenza del metodo AddeventListener ().
Sintassi
elemento.addEventListener (evento, ascoltatore, usecapture);Nella sintassi data, "evento"Si riferisce all'evento specificato,"ascoltatore"È la funzione che verrà invocata e"usecapture"È il valore opzionale.
Sintassi
Html
Nella sintassi data, "elemento"Indica l'elemento con cui il"al clic"L'evento sarà associato. Qui, "MyScript"Si riferisce alla funzione che verrà chiamata su cui si verificherà l'evento OnClick.
JavaScript
oggetto.onClick = function () myscript;Allo stesso modo, nella sintassi sopra, "oggetto"Si riferisce all'oggetto associato all'evento OnClick.
Differenze fondamentali tra ADDENTLISTENER e Evento OnClick
| addEventlistener | al clic |
| Il metodo ADDEventListener può essere aggiunto solo in JavaScript. | OnClick può essere incluso in HTML e in JavaScript. |
| ADDEVENTLISTENER non funziona nelle versioni precedenti di alcuni browser. | OnClick è compatibile con tutti i browser. |
| Questa funzione può collegare più eventi a un particolare elemento. | Questo evento associa solo un singolo evento a un elemento. |
| Non può collegare i file HTML e JavaScript. | L'evento OnClick può collegare le funzionalità di HTML e JavaScript. |
Ora, passiamo attraverso i seguenti esempi per capire chiaramente la differenza dichiarata.
Esempio: metodo addEventListener () per rilevare se viene premuto il tasto particolare
In questo particolare esempio, applica il "documento.addEventListener ()"Metodo e allegare un evento chiamato"keydown"Nel suo argomento. Ciò comporterà la notifica dell'utente tramite avviso quando il "accedere"Il tasto viene premuto:
documento.addEventListener ("keydown", (e) =>Se (e.key == "enter")
Avviso ("Il tasto ENTER è premuto")
);
L'output corrispondente sarà:
Esempio: OnClick Evento per modificare il colore del pulsante
Nel seguente esempio, creeremo un pulsante con "pulsante" id. Quindi, includi un "al clic"Evento che invocherà il pulsante funzione () al clic del pulsante:
Ora, definisci una funzione chiamata "ButtonColor ()". Nella definizione della funzione, accedi al pulsante usando "documento.GeelementById ()" metodo. Inoltre, applica lo stile.Proprietà BackgroundColor per impostare il colore del pulsante e assegnarlo un codice colore RGB come sfondo:
Funzione ButtonColor ()documento.getElementById ("pulsante").stile.backgroundColor = '#911';
Produzione
Esempio: OnClick Evento per modificare il colore del pulsante usando JavaScript
L'esempio sopra discusso può essere applicato aggiungendo "al clic"Evento nel codice JavaScript. Per fare ciò, in primo luogo, crea un pulsante usando ""Tag:
Ora, prendi il pulsante creato usando "documento.getElementById ()Metodo e applicare il "al clic"Evento su di esso. Ora, ripeti tutti gli altri passaggi per modificare il colore del pulsante:
Let Button = Document.getElementById ("pulsante")pulsante.OnClick = function ButtonColor ()
documento.getElementById ("pulsante").stile.backgroundColor = '#911';
Si tradurrà nella stessa output:
Abbiamo discusso delle differenze tra AddeventListener e OnClick in JavaScript.
Conclusione
La differenza principale tra la funzione addEventListener e l'evento OnClick è che AddeventListener può allegare più eventi a un singolo elemento HTML, mentre l'evento OnClick può solo associare l'evento click a un pulsante. Inoltre, ADDEventListener può essere utilizzato solo con il codice JavaScript e gli eventi OnClick funziona in entrambi i file HTML e JavaScript. Questo manuale ha guidato il metodo AddeventListener e l'evento OnClick sia teoricamente che praticamente.