JavaScript document loading and event binding

Source: Internet
Author: User

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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.