javascript events

Javascript has events to provide a dynamic interface to a webpage.
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element

Mouse events

Mouse envets apply on html events. like h1, p, button etc elements.

<button onclick="myFunc()">Events nature</button>

• onmouseover/onmouseout - When the mouse passes over an element

• onmousedown/onmouseup - When pressing/releasing a mouse button

• onmousedown - When mouse is clicked: Alert which element

• onmousedown - When mouse is clicked: Alert which button

• onmousemove/onmouseout - When moving the mouse pointer over/out of an image

• onmouseover/onmouseout - When moving the mouse over/out of an image

• onmouseover an image map

• onclick - When button is clicked

• ondblclick - When a text is double-clicked

Input events

Input envets apply on input element of form element.

Name : <input type="text" id="demo" onkeydown="myfunc2(event)">

• onblur - When a user leaves an input field

• onchange - When a user changes the content of an input field

• onchange - When a user selects a dropdown value

• onfocus - When an input field gets focus

• onselect - When input text is selected

• onsubmit - When a user clicks the submit button

• onreset - When a user clicks the reset button

• onkeydown - When a user is pressing/holding down a key

• onkeypress - When a user is pressing/holding down a key

• onkeyup - When the user releases a key

• onkeyup - When the user releases a key

• onkeydown vs onkeyup - Both

Window/load events

Window envets apply on window.

<body onmousewheel="myfunc2(event)">

• onload - When the page has been loaded

• onload - When an image has been loaded

• onerror - When an error occurs when loading an image

• onunload - When the browser closes the document

• onresize - When the browser window is resized

other events

• What is the keycode of the key pressed? (event.keyCode)

• What are the coordinates of the cursor? ( event.clientX , event.clientY)

• What are the coordinates of the cursor, relative to the screen? (event.screenX, event.screenY)

• Was the shift key pressed?
if (event.shiftKey == 1) { console.log("shift key pressed! and click") }

• Which event type occurred? (event.type)

function getEventType(event) {
console.log(event.type)
}

<body onmousewheel="myfunc2(event)">

function myfunc2(event) {
   // console.log(event.clientX )
   // console.log(event.clientY, "y" )
   // console.log(event.screenX )
   // console.log(event.screenY, "y" )
   // console.log(event.pageX, "y" )
   console.log(event.pageY, "y" )
   if(event.pageY>250){
      document.body.style.background="red"
   }else{
      document.body.style.background="pink"
   }
}