When an event occurs there are some default action which the browser takes(like clicking on a link open up the location specified in attribute href).An event may be a click, mouseover, keystroke etc.
The most easiest and the simplest way to handle events is by using Inline Events.
To create an Inline Event you need a simple event handler and event attribute
HTML elements define an event attribute for each of the event which can be supported. Eg onclick event attribute is the attribute for global onclick event, which gets triggered when the element is clicked.
In the below demo, when the event is triggered the browser sets the value of the special variable this to the HTMLElement Object reprsenting the element that triggered the event.
In the above example the transition of style is one way, i.e the style doesn't reset when the mouse leaves the target element
The counter event to the mouseover is the event mouseout , the corresponding event attribute is onmouseout .
The task of defining function for every event attribute is cumbersome and requires a lot of duplication of code.
This issue can be addressed by using Event Handling Functions, which specifies the function name as the value for the event attribute in the element.
In the below demo, the above example is done using Event handling function which is called when the event occurs.