JavaScript event binding (convenient when js is not supported)_javascript skills

First of all, for example, we use JavaScript to enhance our web pages, but we have to consider that if the user's browser does not support JavaScript, or the user has disabled the JavaScript function, can our web page be displayed normally? For example, the following example,

Copy code The code is as follows:

The popUp function is customized and opens a new window to limit the web pages in the URL. But if the client does not support it, the web page will not work properly. Therefore, when we use this method, we also consider more, and it will be more appropriate to use the following code.

Copy code The code is as follows:

Then, the author uses CSS as an example. In the process of using CSS, we found that, except that we used to load the CSS file, we did not add any CSS-related code to the content of our web page, so that the structure could be well integrated. It is separated from style, that is, our css code does not invade our main code. In this way, even if the client does not know CSS, our main content customers can still see it, and our content structure can also be displayed to the customer. So JavaScript is equivalent to the behavior layer, and CSS is equivalent to the presentation layer. JavaScript can also be as non-intrusive as CSS. Below is an example from the book.

Copy code The code is as follows:

The above code can ensure that it can still work normally even if the client does not support JavaScript, but an event handler such as onclick appears in the above code. So now we use methods like CSS to complete the functions we want. As follows:

Copy code The code is as follows:

In this way, when the page is loaded, we can execute window.onload to detect which use class, and then use the popUp method uniformly. The following code

Copy code The code is as follows:

var links = document.getElementsByTagName("a");
for (var i=0 ; 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;
}
}
}

This way there will be less intrusion into our html code.

Finally, the author talked about our need to achieve backward compatibility and minimize JavaScript. For backward compatibility, we can use something like if(document.getElementById) to test that this method exists, and it can only be used if it exists. The minimization of JavaScript code is mainly to reduce JavaScript, which can speed up the loading of our web pages.

Next, I encountered a problem that I didn’t understand while reading the book. I hope the prawns can help solve it.

Where should <script> be placed? As mentioned in the art of JavaScript DOM programming, we can put <script> before </script>