Access event object in event handler

When i try to attach event handler functions with parameters like :

myhandle.onclick = myfunction(param1,param2);

function myfunction(param1,param2){
}

Now I want to access the event object in my handler function. There is an approach mentioned on the web of sending event object, like:

myhandle.onclick = myfunction(event,param1,param2);

But its giving event objec开发者_运维技巧t undefined when i test it out.

I know libraries make this stuff easy but I am looking for a native JS option.

---

myhandle.onclick = myfunction(param1,param2);

This is a common beginner error at a JavaScript level, and not something that libraries can really fix for you.

You are not assigning myfunction as a click handler, you are calling myfunction, with param1 and param2 as arguments, and assigning the return value of the function to onclick. myfunction doesn't return anything, so you'd be assigning undefined to onclick, which would have no effect..

What you mean is to assign a reference to myfunction itself:

myhandle.onclick= myfunction;

To pass the function some extra arguments you have to make a closure containing their values, which is typically done with an anonymous inline function. It can take care of passing the event on too if you need (though either way you need a backup plan for IE where the event object isn't passed as an argument):

myhandle.onclick= function(event) {
    myfunction(param1, param2, event);
};

In ECMAScript Fifth Edition, which will be the future version of JavaScript, you can write this even more easily:

myhandle.onclick= myfunction.bind(window, param1, param2);

(with window being a dummy value for this which you won't need in this case.)

However, since many of today's browsers do not support Fifth Edition, if you want to use this method you have to provide an implementation for older browsers. Some libraries do include one already; here is another standalone one.

if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}

---

I'm not entirely sure what you're trying to do, but perhaps something like this is what you're looking for?

function myfunction(param1, param2){
    return function(event) {
        // For compatibility with IE.
        if (!event) {
            event = window.event;
        }

        alert("event = " + event + ", param1 = " + param1 + ", param2 = " + param2);
    };
}

myhandle.onclick = myfunction(param1, param2);

The end result of this is that the anonymous function inside of myfunction will be called as the onclick handler, resulting in the event plus the two parameters being printed. The two parameters are fixed at the time that the event handler is added while event will change each time the user clicks on myhandle.

---

Try this:

if (!event) { event = window.event; }

inside of myfunction().