Buttons: onClick vs click Event Listener Playground with Bonus DOM swapped click element!

Here’s a button with some classic click handling with good ol’ alert and console debugging to attach via links below:


Added
Added
Removed
Click Dummy now clickable

Experiment #1: Go through links above in order. Click button after each step to see what it did.

Experiment #2: Try reloading this page and add 1. and 2. in reverse order – see if it changes the order of when they fire.

Experiment #3: Reload and then select 4. and then try adding 1. and/or 2., original and replacement buttons have the same ID used to attach click handling, see which button gets the click handling.

Posted in JavaScript, Web Development | Leave a comment