HTML Events and JavaScript

There are 2 types of webpages.

  1. Static
  2. Dynamic

In static page, user can not interact with web page except clicking on the page.
In dynamic page, user can interact with the web page. For example – You can enter values in the edit boxes and click on buttons.
If you typed incorrect value in the edit box, proper validation message is displayed.

JavaScript is the crux of dynamic pages. When we click on button, click event is created. We can write the JavaScript code to run after or before any such event.

We can write the code inline or we can also call some java script function as well.

In below example – We have defined one button. When user clicks on the button, alert is displayed. “onclick” attribute tells browser to execute the JavaScript code.

<button onclick=”alert(‘You clicked me’);”>Click here</button>

There are 3 more ways in which we can add the event handling code in JavaScript.

  1. <element>.onclick = <function>;
  2. <element>.addEventListener(“click”, <function>);
  3. <element>.addEventListener(“click”, function(){console.log(‘function body here’) });

Here is the syntax of addEventListener.

addEventListener(event, function, propagationType);

The default value of propagationType parameter is false (bubbling Propagation – Innermost element’s events will be handled first and then all parent element’s events will be handled). If you want capturing propagation (Outermost element’s event is handled first followed by innermost), you need to pass true.

You can remove the event listener using below syntax.

<element>.removeEventListener(“click”, <functionName>);

Here is the list of common events you need to handle.

Window events

  1. onload – This event occurs when page is loaded. We can also attach this event to image.
  2. onbeforeunload
  3. onunload –  This event occurs when page is unloaded. This happens when user is trying to navigate to another page.
  4. onscroll
  5. onerror – This event occurs when external resource file (external JavaScript or CSS file) is not found.
  6. onresize – This event occurs when the browser window is re-sized.

Form Events

  1. onreset – This event occurs when button with type – reset is clicked.
  2. onsubmit – This event occurs when form is submitted. This also occurs when submit button is clicked.

Element Events

  1. onchange – This event occurs when the value in the text box is changed or new option is selected from the drop down.
  2. onsearch
  3. onselect – This event occurs when the portion of value is selected in a text box.
  4. ondrag
  5. ondrop
  6. oninput
  7. oninvalid
  8. onfocus – This event occurs when element gets focus
  9. onblur – This event occurs when focus is taken out of an element
  10. onfocusin – This event is like onfocus. Difference is that it’s not browser compatible and also event is allowed to bubble to parent elements.
  11. onfocusout – This event is like onblur. Difference is that it’s not browser compatible and also event is allowed to bubble to parent elements.

Keyboard events

  1. onkeypress – This event occurs after character key is pressed. This event will not be triggered if you press modifier keys like ALT, CTRL etc
  2. onkeydown – This event occurs when any key is pressed.
  3. onkeyup – This event occurs when key is released.

Mouse events

  1. ondblclick
  2. onclick
  3. onmouseenter – This event occurs when mouse enter the specified element.
  4. onmouseleave  – This event occurs when mouse leaves the specified element.
  5. onmouseover  – This event occurs when mouse enter the specified element and also when mouse enters the child elements.
  6. onmouseout – This event occurs when mouse leaves the specified element and also when mouse leaves the child elements.
  7. onmousemove – This event occurs when the mouse is moving over the element.
  8. onmousedown – This event occurs when one of the mouse button is pressed down.
  9. onmouseup – This event occurs when one of the mouse button is released.

When event happens, event object is created. For example – When mouse event happens, MouseEvent object is created. When any keyboard event happens, keyboardEvent object is created.

All Event objects have below properties.

  1. target
  2. timeStamp
  3. type – returns the type of event occurred.

Example on Simple Mouse Event Handling

<button onmousedown=”f1(event)”> click me </button>

function f1(event) {

console.log(“You clicked button number -> ” + event.button )
//0 means left mouse button

console.log(“X co-ordinate of click -> ” + event.clientX);

console.log(“X co-ordinate of click with respect to screen-> ” + event.screenX);
console.log(“Y co-ordinate of click -> ” + event.clientY);
}

Example on Simple Key Press Event Handling

<input onkeypress=”f1(event)”/>

function f1(event) {
console.log(“You pressed -> ” + event.key)
}

 

You may also like...