onclick assigned function with parameters

Question

I'm not sure if this has been asked before because I don't know what it's called.

But why wouldn't a method like this work? Below is just a general example

<script>
document.getElementById('main_div').onclick=clickie(argument1,argument2);

function clickie(parameter1,parameter2){
 //code here
}

</script>

The code above would work fine if the event handler was assigned without parameters, but with parameters, it doesn't work. I think I read online that to overcome this problem, you could use closures. I'm assuming it's because of the parentheses ( ) that is calling the function immediately instead of assigning it to the event?

Answer 1

To bind an event to a element, you need to use either the attachEvent or addEventListener method. For example.

/* Non IE*/
document.getElementById('main_div').addEventListener('click', function () {}, false);

/* IE */
document.getElementById('main_div').attachEvent('onclick', function () {});

Answer 2

A function name followed by parentheses is interpreted as a function call or the start of a function declaration. The a onclick property needs to be set to a function object. A function declaration is a statement, and is not itself a function. It doesn't return a reference to the function. Instead it has the side effect of creating a variable in the global scope that refers to a new function object.

function clickie(param) { return true; }

creates a global variable named clickie that refers to a function object. One could then assign that object as an event handler like so: element.onclick = clickie;. An anonymous function declaration (often confused with a closure; for the difference see Closure vs Anonymous function (difference?)) does return a function object and can be assigned to a property as an event handler, as follows:

element.onclick = function(event) { return true; };

But this doesn't work:

element.onclick = function clickie(event) { return true;};

Why? Because function clickie(event) { return true;} is a statement, not a function. It doesn't return anything. So there is nothing to be assigned to the onclick property. Hope this helps.

Answer 3

When you say onClick = function() {...} you are registering your function with some internal JavaScript library. So when the "click" happens, that library invokes your function.

Now imagine you're the author of that library and someone registered their function with it. How would you know how many parameters to pass to the function? How would you know know what kind of parameters to pass in?

clickie(argument1,argument2)

This means to invoke the function and return its return value.

clickie

This simply is a reference to the function (doesn't invoke/execute it)

Answer 4

Because you're calling the function immediately and returning the result, not referencing it.

When adding the parenthesis you call the function and pass the result back to onclick

document.getElementById('main_div').onclick = clickie(); // returns undefined

so it's actually equal to writing

document.getElementById('main_div').onclick = undefined;

which is not what you want, you want

document.getElementById('main_div').onclick = clickie;

but then you can't pass arguments, so to do that you could use an anonymous function as well

document.getElementById('main_div').onclick = function() {
    clickie(argument1,argument2);
}

or use bind

document.getElementById('main_div').onclick = yourFunc.bind(this, [argument1, argument2]);

It is however generally better to use addEventListener to attach event listeners, but the same principle applies, it's either (without arguments)

document.getElementById('main_div').addEventListener('click', clickie, false);

or bind or the anonymous function to pass arguments etc.

document.getElementById('main_div').addEventListener('click', function() {
    clickie(argument1,argument2);
}, false);

Answer 5

The easiest way is:

yourElement.onclick = yourFunc.bind(this, [arg1, arg2]);

function yourFunc (args, event) {
    // here you can work with you array of the arguments 'args'
}