To ensure that the webpage code levels are clear and easy to manage, HTML generally only reflects the webpage structure. The specific behavior is implemented through JS, and the style is managed through CSS files.
In the above principles, when implementing behavior through JS, be sure to pay attention to the timing of executing JS Code during document loading. The page loading process has two events: ready, indicating that the file structure has been loaded (excluding non-text media files such as images), and onload, indicates that all elements, including images, are loaded. (It can be said that ready is loaded before onload .)
(1) Some function definitions to be called must be defined before the call.
(2) JavaScript codes that improve web page elements are loaded and executed along with documents.
(3) JS bound to element event responses must be executed after the corresponding element is loaded or after all the documents are loaded. Otherwise, the elements cannot be found and events cannot be bound.
In case (3), use JavaScript to implement the following time code.
Window. onload = function () {document. getElementById ('id'). addEventListener ('click', func, false); // you need to define the response function func}
JQuery can be used in two ways.
$(function(){ $("#id").click(function(){ //adding your code here }); $("#id").bind('dbclick', function(){ //adding your code here });}); $(document).ready(function(){ $("#a").click(function(){ //adding your code here }); $("#id").bind('dbclick', function(){ //adding your code here });});
In addition, when Javascript is implemented, the code will be executed after all the documents on the entire page are loaded. Unfortunately, this method not only requires that the DOM tree of the page be fully loaded, but also requires that all external images and resources be fully loaded. Unfortunately, if external resources and sample files take a long time to load, this js effect will make the user feel ineffective.
Zookeeper