onlyforbopi
9/19/2018 - 6:37 PM
JS.Events.AddEventListener.EntirePage
JS.Events.AddEventListener.EntirePage
/*
Page lifecycle events
These events detect when the page is loaded and when the DOM is ready.
Events related to the page lifecycle
There are many other events related to the page life cycle. The most useful ones for an introduction course are shown below:
load This event occurs when an object has loaded (including all its resources: images, etc.). This event is very useful when you want to run JS code and be sure that the DOM is ready (in other words, be sure that a document.getElementById(...) or document.querySelector(...) will not raise an error because the document has not been loaded and elements you are looking for are not ready).
resize The event occurs when the document view is resized. Usually, we get the new size of the window inside the event listener using var w = window.innerWidth; and
var h = window.innerHeight;
scroll The event occurs when an element's scrollbar is being scrolled. Usually in the scroll event listener we use things such as:
var max = document.body.scrollHeight - innerHeight;
var percent = (pageYOffset / max);
...to know the percentage of the scroll in the page.
Page event properties
There are no particular properties that need to be mentioned here. Usually, the load event listener corresponds to a JavaScript function that can be seen as "the main" function of your Web application. It is a best practice to start everything after the page has been completely loaded. In the resize listener, you get the new size of the window, or the new size of some HTML elements in the page (as they might have been resized too when the window was resized), and then you do something (redraw a graphic in an HTML canvas that takes into account the new canvas size, for example).
*/
<!DOCTYPE html>
<html lang="en">
<head>
<title>First example of an event listener</title>
<meta charset="utf-8">
<script>
// Let's add a click event listener on the whole page
// Version 1 : we use a separate callback function
//addEventListener('click', processClick);
/*
function processClick(evt) {
alert("click");
}*/
// version 2 (very common): we put the callback between //the parenthesis
addEventListener('click', function(evt) {
alert("click");
});
// version 3: use the syntax with "on" followed by
// the name of the event, followed by the callback
// function or a ref to the callback function
// When listening on the whole window, we usually
// explicitly use window.onclick, window.onkeyup etc.
window.onclick = processClick;
function processClick(evt) {
alert("click");
};
</script>
</head>
<body>
<p>Click anywhere on this page</p>
</body>
</html>