Three ways to specify events for an element in JavaScript _javascript tips

In JavaScript, you can specify an event for an element in the following three ways:
1, in HTML, using the OnClick property
2, in JavaScript, using the OnClick property
3. In Javascipt, use the Addevenlistener () method

Comparison of three methods
(1) in the second to third method, you can pass in an event object to the function and read its corresponding property, and method one is not available.
(2) Preferred second to third, the first is not conducive to the separation of content and events, you can not use the event object related content.

Some grammatical details
(1) In the first method, the OnClick case is not relevant, but in the second method, you must use lowercase. Because HMTL is not sensitive to case, JS is case-sensitive.
(2) in the second to third method, there is no double quotation mark when specifying the function name, and the first one as an HTML property requires double quotes.
(3) The first method requires parentheses, and the second to third is not required.

Onclick= "ClickHandler ()"
document.getElementById ("Jsonclick"). onclick = ClickHandler2; 
document.getElementById ("AddEventListener"). AddEventListener ("click", ClickHandler2);

The complete code is as follows:

<! DOCTYPE html> 
 
 

In JavaScript, you can specify an event for an element in the following three ways:
1, in HTML, using the OnClick property

2, in JavaScript, using the OnClick property
(1) Note that the function name does not have double quotes.

3. In Javascipt, use the Addevenlistener () method

Comparison of three methods
(1) in the second to third method, you can pass in an event object to the function and read its corresponding property, and method one is not available.

Some grammatical details
(1) In the first method, the OnClick case is not relevant, but in the second method, you must use lowercase. Because HMTL is not sensitive to case, JS is case-sensitive.
(2) in the second to third method, there is no double quotation mark when specifying the function name, and the first one as an HTML property requires double quotes.
(3) The first method requires parentheses, and the second to third is not required.

Onclick= "ClickHandler ()"
document.getElementById ("Jsonclick"). onclick = ClickHandler2; 
document.getElementById ("AddEventListener"). AddEventListener ("click", ClickHandler2);

The complete code is as follows:

 <! DOCTYPE html>