Different events based on basic javascript/ javascript frameworks
window.onload
document onload
$(document).ready
$(window).load
Event.observe
YAHOO.util.Event.onDOMReady
dojo.connect
Javascript window.onload
Syntax :
window.onload = functionreference;
Window.onload is triggered when the complete document is loaded including images and all other elements. This is preferred over body tags onload event because it is always easy to write window.onload in the script file or in html document itself.
A simple use of windows.onload is as below:
<html>
<head>
<title>Window load event test</title>
</head>
<body>
<script type="text/javascript">
function test() {
alert("window got loaded completely");
// add your code here
}
window.onload = test;
</script>
Hello world!
</body>
</html>This can also be written as
window.onload = function() {
test();
};you can easily see the effect if you add more elements like some heavy images or some code from outside in the page. Then you’ll notice that the alert message is getting triggered after all the elements are loaded
you can try adding some scripts,css from google
<html>
<head>
<title>Window load event test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
function test() {
alert("window got loaded completely");
// add your code here
}
window.onload = test;
</script>
Hello world!
</body>
</html>you’ll see a little delay in the alert message than before. You can call window.load just like any other js method in the html document or in any attached js file
Javascript: body onload
body onload event is another method of calling a function after the document is loaded. Onload event occurs when the browser finishes loading the window.
Syntax
<body οnlοad=”test()”>
Example
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function test() {
alert("body got loaded completely");
// add all your code here
}
</script>
</body>
</html>Libraries:
Jquery
$(document).ready : Anything written in this function will be executed when the DOM is ready and html document is loaded. Unlike window.onload this does not wait for other elements to be loaded completely like images and other things.
Example
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body >
<script type="text/javascript">
$(document).ready(function(){
alert("document loaded completely");
});
</script>
</body>
</html>$(window).load : This one is like window.load. This will wait for all the elements to get loaded before it starts execution. It will first load all the elements including images, objects, frames etc.
Example
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body >
<script type="text/javascript">
$(window).load(function(){
alert("window loaded completely");
});
</script>
</body>
</html>Prototype
Event.observe
Example
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
</head>
<body >
<script type="text/javascript">
Event.observe(window, 'load', function() {
alert("Loaded!");
// more code here
});
</script>
</body>
</html>YUI
onDOMReady : onDOMReady lets you define a function that will execute as soon as the DOM is in a usable state.
Example
<html>
<head>
<title></title>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.1/build/event/event-min.js"></script>
</head>
<body >
<script>
function test() {
alert('Loaded!');
// add all your code here
}
YAHOO.util.Event.onDOMReady(test);
</script>
</body>
</html>Dojo
dojo.connect : eh!! i had to work so much to get this one working. earlier versions must be using the below:
dojo.require(“dojo.event.*”);
dojo.event.connect(window, “onload”, myappInit);
But now it has been changed to dojo.connect. phew!! i found this at http://docs.dojocampus.org/quickstart/events and got this one working.
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
</head>
<body >
<script type="text/javascript">
function test() {
alert("Loaded!");
// add all your code here
}
dojo.connect(window, "onload", "test");
</script>
</body>
</html>
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
