Javascript Events

Events are things, which happen with HTML or Javascript variable.

Javascript can catch (react) that thing (events).

Javascript Events

Javascript events can be triggered by user or by browser.Let's imagine a problem, that you need to call a function, when the HTML tag clicked or any other events.

To explain it, you must know, that you can use Javascript Events with two ways.

1) With Html Tags

2) With Javascript Codes

Here is the syntax of using events.

<any-tag any-event="Javascript code">

 object.[any-event]=function(){myScript}; 

 object.addEventListener("[any-event]", myScript); 

Let's make an example.

<!DOCTYPE html>
<html>
 <body>
   <button onclick="getElementById('element').innerHTML='click-event'">Click Me</button>
   <p id="element">Test me</p>
 </body>
</html>

Javascript has very long list for Events. We'll try to show you the basics, which you will need.

This is the HTML tag events list

Mouse Events

Attribute Value Description
onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
ondrag script Script to be run when an element is dragged
ondragend script Script to be run at the end of a drag operation
ondragenter script Script to be run when an element has been dragged to a valid drop target
ondragleave script Script to be run when an element leaves a valid drop target
ondragover script Script to be run when an element is being dragged over a valid drop target
ondragstart script Script to be run at the start of a drag operation
ondrop script Script to be run when dragged element is being dropped
onmousedown script Fires when a mouse button is pressed down on an element
onmousemove script Fires when the mouse pointer is moving while it is over an element
onmouseout script Fires when the mouse pointer moves out of an element
onmouseover script Fires when the mouse pointer moves over an element
onmouseup script Fires when a mouse button is released over an element
onmousewheel script Deprecated. Use the onwheel attribute instead
onscroll script Script to be run when an element's scrollbar is being scrolled
onwheel script Fires when the mouse wheel rolls up or down over an element

Form Events

Attribute Value Description
onblur script Fires the moment that the element loses focus
onchange script Fires the moment when the value of the element is changed
oncontextmenu script Script to be run when a context menu is triggered
onfocus script Fires the moment when the element gets focus
oninput script Script to be run when an element gets user input
oninvalid script Script to be run when an element is invalid
onreset script Fires when the Reset button in a form is clicked
onsearch script Fires when the user writes something in a search field (for <input="search">)
onselect script Fires after some text has been selected in an element
onsubmit script Fires when a form is submitted

Keyboard Events

Attribute Value Description
onkeydown script Fires when a user is pressing a key
onkeypress script Fires when a user presses a key
onkeyup script Fires when a user releases a key

Lets make some examples.

<!DOCTYPE html>
<html>
  <body>

   <p>Here is W3docs.com keypress Events exmple</p>
   <input type="text" onkeypress="myFunction()">

   <script>
    function myFunction() {
      alert("Hello onkeypress event");
    }
   </script>
 </body>
</html>
<!DOCTYPE html>
<html>
  <body>

   <button ondblclick="myFunction()">W3docs.com Dbclick Event</button>
   <p id="element">Text will change</p>

   <script>
     function myFunction() {
        document.getElementById("element").innerHTML = "Hello World";
     }
   </script>

  </body>
</html>
<!DOCTYPE html>
<html>
  <body>

   <p id="element" onmousedown="mDown()" onmouseup="mUp()">
          The text will colored when you click on it
   </p>

   <script>
     function mDown() {
        document.getElementById("element").style.color = "blue";
     }

     function mUp() {
       document.getElementById("element").style.color = "red";
     }
   </script>
  </body>
</html>