JavaScript event binding (when JavaScript is not supported)

First, for example, we use JavaScript to enhance our webpage, but we need to consider that if your browser does not support JavaScript or the user disable the JavaScript function, can our webpage be displayed normally? For example,

Copy codeThe Code is as follows: <a href = "#" onclick = "popUp ('HTTP: // www.jb51.net'); return false;">

The popUp function is customized. A new window is opened to restrict the webpage in the URL. However, if the client does not support this function, the webpage will not work properly. Therefore, the following code is more suitable for our use.

Copy codeThe Code is as follows:
<A href = "http://www.jb51.net" onclick = "popUp (this. href); return false;">

The author uses CSS as an example. In the process of using CSS, we found that apart from using <link> to load CSS files, we didn't add any css-related code to the content of our webpage, so we can well separate the structure and style, that is, our css Code does not intrude into our main code. In this way, even if the client does not know css, but the main content customers can still see, our content structure can also be displayed in the customer. Therefore, JavaScript is equivalent to the behavior layer, and css is equivalent to the presentation layer. JavaScript can also be as non-invasive as CSS. The following is an example in the book.

Copy codeThe Code is as follows:
<A href = "http://www.jb51.net" onclick = "popUp (this. href); return false;">

The code above can ensure that the client can still work normally without supporting JavaScript, but the event handler such as onclick appears in the code above. So now we use methods like CSS to complete the functions we need. As follows:

Copy codeThe Code is as follows:
<A href = "http://www.jb51.net" class = "popup">

In this way, when the page is loaded, execute window. onload to check which <a> class is used and then use the popUp method in a unified manner. The following code

Copy codeThe Code is as follows:
Var links = document. getElementsByTagName ("");
For (var I = 0; I <links. length; I ++ ){
If (links [I]. getAttribute ("class") = "popup "){
Links [I]. onclick = function (){
PopUp (this. getAttribute ("href"); // Attention use this in this place. Because this is equals onClick = "popUp (this. href )"
// So we cann' t use links [I].
Return false;
}
}
}

In this way, we can intrude less into our html code.

Finally, the author tells us that we need to achieve backward compatibility and minimize JavaScript. Backward compatibility. We can use if (document. getElementById) to test this method. JavaScript code is minimized mainly to reduce JavaScript, which can accelerate webpage loading.

Below I encountered a problem I don't understand while reading a book. I hope the prawns can help solve it.

Where should I put <script>? In the art of JavaScript DOM programming, we can put <script> before </body>, instead of

Original article:

The placement of your scripts in the markup also plays a big part in initial load times. Traditionally,
We were told to always place scripts in the That. Scripts in the Other scripts) in parallel. In general, the HTTP specification suggests that browsers download no more
Than two items at the same time per hostname. While a script is downloading, however, the browser
Won't start any other downloads, even on different hostnames, so everything must wait until the script
Has finished.
If you're following the progressive enhancement and unobtrusive methodologies discussed earlier
In the chapter, then moving your <script> tags shouldn't be an issue. You can make your pages load
Faster simply by including all your <script> tags at the end of the document, directly before the </body>

Tag. When the scripts load, your window load events will still apply your changes to the document.