Passing parameters in .addEventListener in JS
[element.addEventListener][ael] in Javascript allows you to pass an Object as the second parameter that has a `handleEvent` method exposed. This allows you to object orientate everything, however you can’t normally pass additional parameters (for example, if you’re trying to use the same event handler for many sub-objects) doesn’t work. For example, you’re stuck with just:
function MyClass() {
for (x = 0; x < 10; x++) {
someElement.childNodes[x].addEventListener("click", this, false);
}
this.handleEvent = function (e) {
if (e.type == "click") {
// .. do something here
}
};
}
You can’t use `eval()` here with an anonymous function, as `this` will not have the right value. However, you can trick the system into letting you pass additional parameters by implementing another class in the middle like so:
function MyClass() {
for (x = 0; x < 10; x++) {
someElement.childNodes[x].addEventListener("click", new MyClassDoSomethingClickHandler(this, x), false);
}
this.doSomething = function(x) {
// do something here...
}
}
function MyClassDoSomethingClickHandler(obj, x)
this.obj = obj;
this.x = x;
this.handleEvent = function (e) {
if (e.type == 'click') {
this.obj.doSomething(this.x);
}
};
}
And thus, you can call doSomething with an event handler, and pass in an extra parameter and still access the rest of the object. You could also extend the `MyClassDoSomethingClickHandler` and `MyClass.doSomething` so that it passes through the event data as well, if you require it.
I’m still working on SVGForm, and I have the start of a focus model, text input control, and I’ve now started on a Menu control. Once the menu works, there’ll be another update.
I’ve passed the “magic” 1,000 lines mark with the code, now. I haven’t coded so much ECMAScript/JavaScript for a single project in my life - my previous record was half that.
[ael]: http://developer.mozilla.org/en/docs/DOM:element.addEventListener