What parameters can you pass to html attribute onchange, onclick, etc.?

Question

When I started learning javascript I thought that the browser would simply run the javascript in onclick attribute of elements as if it was inside a script tag. However I realize that is not the case because you can use certain parameters inside these attributes. For example onclick="foo(this, event)" passes the event triggered and the element that the event was triggered on to function foo.

I wonder what other parameters can be used inside these tags? The documentation on w3schools does not mention anything about this. I would also like to know how these attributes are implemented; how is the function called and in what scope (I know that foo will be called like element.foo() but this is not true for other javascript expressions). Is there a comprehensive documentation anywhere? my best guess at the moment is that the implementation looks like this:

element.onclickfunction = function(){
    var event = new Event(...)
    eval(element.onclick)
}

Edit: none of the responses really answered my question. I was interested to know what other special parameters can be passed to the function specified in an event handler and how the parameter this is interpreted to be the Element. I am picking the best answer because he provided a link to mdn where EventHandler interface is described.

You should check this site it looks like it may be useful: http://javascript.info/tutorial/obtaining-event-object — Bassie, Aug 11 '16 at 23:28
`element.onclickfunction = ...` - you mean `element.onclick = ...` - that receives a single argument, which is the event object, and `this` inside the callback function is the element that triggered the event (note: internet explorer may be different, I don't care to find which version does what, that's a simple task left to the developer) — Jaromanda X, Aug 11 '16 at 23:32
See [DOM on-event handlers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers). More generally, [Event developer guide](https://developer.mozilla.org/en-US/docs/Web/Guide/Events). — Makyen, Aug 11 '16 at 23:48
in JavaScript, you should be using [`addEventListener('click',function[, capture])`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead of `element.onclick`. Unless you *completely* control all HTML and JavaScript for the page, using `element.onxxxxxx` can break other code, because assigning to it replaces any event listener already defined in either the HTML (via `onxxxxxx` attributes) or in JavaScript (using `.onxxxxxx` properties, or attributes). Using `addEventListener()` does not interfere with other code. — Makyen, Aug 11 '16 at 23:51

score 2 · Accepted Answer · edited May 23 '17 at 12:08

In JavaScript, you can register an event listener on any DOM element, the document itself, the context window, or any other objects that support events. There are a whole bunch of events that are defined in a whole bunch of web standards. A good resource that lists these out is the Mozilla Developer Network.

The EventListener that gets registered to the event only takes one parameter: the event. You can see that it only has one method, handleEvent, which takes only one parameter.

To pass other stuff into the event handler, you can take advantage of closures or bind(). I'm going to borrow from this answer to demonstrate how bind() works:

elem.addEventListener(function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

Binding elem, arg1, and arg2 to the function means that the this of the function becomes elem, and the first two arguments of the function become arg1 and arg2. The e argument is still the event that triggered the function, just like always. Binding stuff like this is super useful when you want to pass stuff from outside the event handler to inside the handler. You can read more about bind() here.

With regards to your specific question about onclick(), the principle is basically the same except your registering a specific click event handler to an element. It too only takes one argument, and that is the MouseEvent object. But like with any function, you can still bind other arguments to it. See here for more info.

I was in the process of writing an answer, but I'll just add a comment to yours: The single argument passed (without `bind`) is an [Event object](https://developer.mozilla.org/en-US/docs/Web/API/Event). For the `onclick` property, this is a [MouseEvent object](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). By default, within the event handler, `this` will be the element on which the event was triggered. — Makyen, Aug 12 '16 at 00:23

What parameters can you pass to html attribute onchange, onclick, etc.?

1 Answers1