Event Handler

Tvwmdaimon
Nov 1 · 2 min read

I’m sure that you’ve seen some websites which has menu and if you click the menu, you would get more detailed menu. You can create that with CSS, but you can create that with JavaScript’s event handler. So I’ll show you really simple event handler explanation and some examples.

First thing first, What is Event Handler?

It is a function or method which is executed when the event happens.
Then, What is event?
An Event is an external action, like click, type and mouse move…etc.

How can I handle event?

  • as a html attribute and write a function in JavaScript
    <button onclick=function()>Click</button>
  • as a element property in JavaScript
    element.onclick = function() {}
  • use .addEventlistener() in JavaScript
    element.addEventListener(click, function);

Event Handler Examples

  • onclick
    Category: mouse
    When it happens: click element
    Where you use: almost all elements
  • onchange
    Category: form
    When it happens: put values and focus another element
    Where you use: input, select, textarea
  • oninput
    Category: form
    When it happens: put values
    Where you use: input, select, textarea
  • oncopy
    Category: ?????
    When it happens: copy
    Where you use: almost all elements
  • oninvalid
    Category: form
    When it happens: put wrong value and send form data
    Where you use: input
  • onresize
    Category: window
    When it happens: change the browser size
    Where you use: body
  • ononline
    Category: window
    When it happens: Be connected internet(wi-fi)
    Where you use: body

Tips

You can return “false” as a return of event handler.
In that case, you can control the original action.
You need to put “return” before function.

There are tons of event handlers. I hope my article help you refresh your knowledge. If you are interested in more event handlers, check the following page or google it.

https://www.w3schools.com/tags/ref_eventattributes.asp

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers

Tvwmdaimon

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade