javascript-add-event-listener

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before1const button = document.getElementById('myButton');
2
3function handleClick() {
4    console.log('Button clicked!');
5}
6
7button.onclick = handleClick;
8

After1const button = document.getElementById('myButton');
2
3function handleClick() {
4    console.log('Button clicked!');
5}
6
7button.addEventListener('click', handleClick);
8button.addEventListener('click', () => {
9    console.log('Additional click handler');
10});
11

Before1const button = document.getElementById('myButton');
2
3function handleClick() {
4    console.log('Button clicked!');
5}
6
7button.onclick = handleClick;
8

After1const button = document.getElementById('myButton');
2
3function handleClick() {
4    console.log('Button clicked!');
5}
6
7button.addEventListener('click', handleClick);
8button.addEventListener('click', () => {
9    console.log('Additional click handler');
10});
11

Before1const button = document.getElementById('myButton');
2
3function handleClick() {
4    console.log('Button clicked!');
5}
6
7button.onclick = handleClick;
8

After1const button = document.getElementById('myButton');
2
3function handleClick() {
4    console.log('Button clicked!');
5}
6
7button.addEventListener('click', handleClick);
8button.addEventListener('click', () => {
9    console.log('Additional click handler');
10});
11

Before

program

lexical_declaration

const "const"

variable_declarator

identifier "button"

= "="

call_expression

member_expression

identifier "document"

. "."

property_identifier "getElementById"

arguments

( "("

string

' "'"

string_fragment "myButton"

' "'"

) ")"

; ";"

function_declaration (+23 nodes collapsed)

expression_statement

assignment_expression

member_expression

identifier "button"

. "."

property_identifier "onclick"

= "="

identifier "handleClick"

; ";"

After

program

lexical_declaration

const "const"

variable_declarator

identifier "button"

= "="

call_expression

member_expression

identifier "document"

. "."

property_identifier "getElementById"

arguments

( "("

string

' "'"

string_fragment "myButton"

' "'"

) ")"

; ";"

function_declaration (+23 nodes collapsed)

expression_statement

call_expression

member_expression

identifier "button"

. "."

property_identifier "addEventListener"

arguments

( "("

string

' "'"

string_fragment "click"

' "'"

, ","

identifier "handleClick"

) ")"

; ";"

expression_statement

call_expression

member_expression

identifier "button"

. "."

property_identifier "addEventListener"

arguments

( "("

string

' "'"

string_fragment "click"

' "'"

, ","

arrow_function

formal_parameters

( "("

) ")"

=> "=>"

statement_block

{ "{"

expression_statement

call_expression

member_expression

identifier "console"

. "."

property_identifier "log"

arguments

( "("

string

' "'"

string_fragment "Additional click handler"

' "'"

) ")"

; ";"

} "}"

) ")"

; ";"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help