onlyforbopi
9/19/2018 - 6:43 PM

JS.Events.PageLoadInitFunction.EventObject

JS.Events.PageLoadInitFunction.EventObject

style.css
content_copyfile_download
#pageStatus {
  border:1px solid red;
  padding: 2px;
  color:red;
}
script.js
content_copyfile_download
// Good practice: have an function
window.onload = init;

function init(evt) {
  // called when the page is loaded
  
  console.log("page loaded");
  
  let span = document.querySelector("#pageStatus");
  span.innerHTML = "PAGE LOADED"; 
  
  let b = document.querySelector("#myButton");
  b.addEventListener('mousemove', function(evt) {
    console.log("x = " + evt.clientX + " : " + "y = " + evt.clientY);
  });
  
  b.addEventListener('click', function(evt) {
    console.log("Click: x = " + evt.clientX + " : " + "y = " + evt.clientY);
  });
  
}
js-events-pageloadinitfunction-eventobject.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Events.PageLoadInitFunction.EventObject

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example1 of the 'load' event</title>
</head>
<body>
  
  <p>PAGE STATUS: <span id="pageStatus">NOT LOADED YET</span></p> 
  
  <button id="myButton">Click me</button>
</body>
</html>