Event Handler
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
