4

My teacher says that onclick in javascript is an event and an event handler. But i'm not able to agree with her, I find them to be different but can't distinguish properly.Have done a ton of google search , couldn't find anything relevant. So somebody please distinguish between event and event handler.

GARIMA JAIN
  • 61
  • 7
  • 1
    click is the event, onclick is the handler.. what's the question btw? – Mr. Alien May 08 '17 at 06:09
  • @Mr.Alien-then what is the function which is given after =sign in " " eg: – GARIMA JAIN May 08 '17 at 06:58

5 Answers5

4

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.

Shakti Phartiyal
  • 6,156
  • 3
  • 25
  • 46
  • -you said"Each event is represented by an object which is based on the Event interface, ........"so that means click is an event object which is created when a user interacts with an element by clicking it and then this object is passed to the onclick event handler. Is this what you are saying ??? And also then then what is the function which is given after =sign in " " eg: – GARIMA JAIN May 08 '17 at 07:09
  • 1
    @GARIMAJAIN see if you pass a function in the onClick handler then that means the handler (onClick) will do the task which is to call and execute the `myfunc()` function upon the click event. – Shakti Phartiyal May 08 '17 at 07:57
  • 1
    -okay si it means when a button is clicked ,"event" click happens and this event is then listened/handled by "event handler"onclick whose work is then to act on the "event" that has occured and for which it then calls the function "myfunc". And this passing of the "event"object(click) to "event handler"onclick is done by tge browser/dom. And also "event" is an object. Just say right if what i have explained is right else please correct me. I am in a life and death situation. :) – GARIMA JAIN May 08 '17 at 08:25
  • @GARIMAJAIN Great. Ping me if you have any other issues. Also kindly approve / upvote the answer so that it helps the community. – Shakti Phartiyal May 08 '17 at 08:50
  • @GARIMAJAIN Yes I do. Do you need help on the topic ? – Shakti Phartiyal May 08 '17 at 10:02
  • -I really dont understand the ip address allocation of subnets of variable sizes using cidr , supernetting and subnetting. Also is there any other way by which we can dicuss, i cant chat here , reputation is not enough. Also this is aquestion that i asked https://networkengineering.stackexchange.com/questions/41007/cidr-block-allocation – GARIMA JAIN May 08 '17 at 12:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143688/discussion-between-shakti-phartiyal-and-garima-jain). – Shakti Phartiyal May 08 '17 at 12:06
0

Event signifies that something has happened.Event handler is when that event has happened,what to do i.e list of things to do when that particular event has happened.

What is onclick event? When the user clicks on a button or any element,if the onclick attribute is registered,automatically an event is registered and the function you specify when that event has occured( event handler ) will be called with the event object being passed (optional).

bigbounty
  • 16,526
  • 5
  • 37
  • 65
0

It's just terminology for different things you need to deal with considering events in javascript.

onclick it the name of an event.

When it occurs you will get an onclick event object.

The function you write to process the event is an event handler.

So when the event occurs an event object is passed to your event handler.

user3094755
  • 1,561
  • 16
  • 20
0

Event is something that can happen to your element and an event handler would be a way of defining how you want to react to that event. For example, an onclick would be an event that would happen when you click a button, now you can define a function that gets called when that event happens which would be your event handler. Reference : https://www.w3schools.com/js/js_events.asp

D.M.
  • 41
  • 3
0

An “event” is an action that happens to HTML elements like click, mouseover, keydown etc. It is related to browser. On the other hand, “event handler” is written in JavaScript to handle the actions caused by the browser like verify user input etc.Link

PSP
  • 49
  • 2