When defining events in html elements, pay attention to the difference in scope chains_html/css_WEB-ITnose

When defining an event in an html element

1. If it is not a called function, then the scope chain here is:

Calling object ----> event Source---->Parent element----->>document----->window

For example:

<script></p> <p> var node = document.getElementById('fp')</p> <p> node. age = 12;</p> <p> age = 13</p> <p></script>

Result: 12

2. If it is a called function, due to JS Lexical scope (the function is executed in the scope in which it is defined, not in the scope in which it is called), then the scope chain here is: calling object----->>window

For example:

<script></p> <p> var node = document.getElementById('fp')</p> <p> node.age = 12;</p> <p> age = 13</p> <p> function msg(){</p> <p> alert( age);</p> <p> }</p> <p></script>

Result: 13

3. If the event is defined in JS, then the scope chain It is also the calling object----->>window