This question has always been a beginner's puzzle. First understand that JS can be placed in the HTML of that position, respectively, head and body. Most people are put in head. I was also confused when I learned to put it in the head of the inside, do not know why? See today, the difference between these two places:
read a paragraph of HTML code first:
Copy Code code as follows:
<title> New Document </title>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<script type= "Text/javascript" src= "Test.js" ></script>
<body>
<div id= "Target" >
</div>
<button id= "btn" > button </button>
</body>
Copy Code code as follows:
var test = function () {
var span = document.createelement ("span");
Span.innerhtml= "Add";
document.getElementById ("target"). AppendChild (span);
}
document.getElementById ("Btn"). Onclick=test;
If this code is placed inside the head, it cannot be run. Why?
This is going to say the operation of HTML order, should be exact point is not the operation of HTML order, is the operation of JS order. HTML runs from top to <script type= "text/html" src= "Test.js" ></script> enters Test.js file. The front does not run, that is, the function is wrapped up will not be run, this time to execute the last sentence. Go to the page to take an element with an element ID of BTN. But this time, the HTML page is not finished loading. The element with ID BTN must not be taken. Will complain. This time someone said that can be changed to the following code:
Copy Code code as follows:
Document.body.onload = function () {
document.getElementById ("Btn"). Onclick=test;
};
But it's not as good as writing in front of </body>.
Have you noticed, above [document.getElementById ("btn"). Onclick=test;] Test without parentheses, then change to [Test ()]. What's going to happen?
As a result, the page load is this way, the click button does not respond. Change the JS code as follows:
Copy Code code as follows:
var test=function () {
var span = document.createelement ("span");
Span.innerhtml= "Add";
document.getElementById ("target"). AppendChild (span);
return function () {
Alert ("AAAA");
};
}
document.getElementById ("Btn"). Onclick=test ();
When the page is loaded, or a look like the one above, when the button is clicked, there is a response to a pop-up box content is "AAAA"; when clicked, the value of return in function was executed. In parentheses, the function is also executed without triggering the event. The return value of the function is executed when the event is triggered. Triggers an event to execute a function without parentheses.
HTML event triggers, what can the content write?
• such as onclick= ""; What can be written in double quotes. Generally see can write function, for example, onclick= "test ();" What else can be written besides this? Okay, is this semicolon going to write?
• Look at the above JS code, each line has a semicolon. The function of semicolons is to confuse statements. That is to say the onclick inside can write JS code. Write a try, as follows
Copy Code code as follows:
<title> New Document </title>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<body>
<div id= "Target" >
</div>
<button id= "btn" onclick= "var espan = document.createelement (' span '); espan.innerhtml= ' Add '; document.getElementById (' target '). appendchild (Espan); > button </button>
</body>
• The results of the operation are as follows:
• Description is available to run. This shows that more than just the name of the function can be put.
Event binding method?
• Event binding methods are commonly used in two kinds of the previous introduction in the event to add JS code. such as: onclick= "Test ();". This binding method has a disadvantage, is that you want to modify, the art has been written code.
There is another way that I start code to write, by ID, only need to add each element ID on the line. You do not need to modify the HTML code.
