Passing Arguments to Event Listeners

JavaScript
1

Hello. I need to pass an argument to an event listener function. I tried to pass argument to event listener function in addEventListener function but it didnt work. How can I solve this problem?

<html>

<head>


<script type="text/javascript">
function loadfunction(event,text){

alert("welcome and "+text);

}


window.addEventListener("load",loadfunction(event,"hello"),true);

</script>
</head>

<body>



</body>

</html>

Thanks in advance.

2 
window.addEventListener("load",function (e) {loadfunction(e,"hello")},true);

Are you sure you want the third argument to be true, i.e., that you want to use this event listener in the capture phase?

3

Hello. I am still bad at those capture and bubble phases. Does it really make big difference if it set to false for a simple page that doesnt have frames or iframes? By the way, I actually want to know methods, if there is any, to pass arguments to event listener functions without anonymous functions and without refering to global space variables?

4

That last argument, true, indicates whether the event will be captured while trickling down or bubbling up. The trickle down is an ancient old technique that has virtually no application these days and is kept around mainly for historical reasons. In virtually all situations you will use false to specify the bubbling phase.
See http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow

What is assigned to listen to an event is a function, so passing arguments can at times be tricky.

The addEventListener method only works on browsers that support the W3C model, while attachEvent is used by IE browsers. So for i to work reliably, you need code like this:


if (window.addEventListener) { // W3C
    window.addEventListener("load", loadfunction, true);
} else if (window.attachEvent) { // IE
    window.attachEvent("onload", loadfunction);
}

These methods are of best use only when you intend for an elements event to mave multiple functions attached to it.

To avoid browser model troubles you can instead use the traditional event registration technique instead.


window.onload = loadfunction;

For all of these, the event doesn’t need to be explicitly passed to these functions (unless you’re using inline event attributes). When a function is called, the this keyword refers to the element that was fired, and the event is passed automatically to the first argument, unless you’re using IE where the event is instead kept in a global variable.

Here’s how that relates to the function:


function loadfunction (evt) {
    // if the evt variable hasn't been set, use the global event object instead
    evt = evt || window.event; // W3C or IE
    // the this keyword refers to the element that fired the event
    // the target element can also be obtained from the event
    var targ = evt.target || evt.srcElement; // W3C or IE
}
window.onload = loadfunction;

So what you’re wanting to do is to pass arguments without using anonymous functions or global variables. Consider the loadfunction() function. It only has the this keyword and the evt object to work with. With the window.onload event, the this keyword will point to the window object, and the load event won’t have any useful information.

So without passing arguments in an anonymous function, and with no global arguments, what can you do?

You can add properties on to the function name itself.


loadfunction.text = 'hello';

Functions are just objects, and in javascript objects can be very flexible. The properties that you add on to the function can then be accessed from anywhere that the function itself can be accessed.


function loadfunction () {
	alert("welcome and " + loadfunction.text);
}
loadfunction.text = 'hello';
if (window.addEventListener) {
    window.addEventListener("load", loadfunction, true);
} else if (window.attachEvent) {
    window.attachEvent("onload", loadfunction);
}