event vs eventhandler in javascript

eventhandler, events, javascript, onclick

Solution

According to documentation at https://developer.mozilla.org.

Event:

Events are sent to notify code of things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the web page.

Event Handler:

The function or lines of code that do something upon an event fire are known as event handlers.

For example:

`click` is an event that is fired when something is clicked.

`onclick` is an event handler that does something when the click event occurs.

<button onClick="alert('You clicked me');">Click me to fire a click event</button>

In the above example when the click event occurs on the button the eventhandler (onClick) does a job which is to alert and show a message.

Event handlers can also be attached to certain events like in the example below:

document.getElementById('sampleParagraph').addEventListener("click", function(){
  //I am the event handler Function
  alert("A click event occured on the paragraph");
});

<p id="sampleParagraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>

In the example above we attached an event handler to the paragraph which on click event shows you an alert.

Problem

Original source