Event context

[Peter Laman]

I want to create an object that handles mouse events for elements,
based on context information stored in that object. This means that
the event handler must be able to access the context object. How do I
do this? Depending on how I bind the event handler, 'this' will refer
to either the HTML element or the window.

I'd like to do something like this:

In a linked .js file:

function eventContext(elementID, someContext)
{
this.element = document.getElementById(elementID)
this.someContext = someContext

this.handleClick = function(e)
{
????
}

this.element.onclick = this.handleClick
}

In the page:

<input type="button" value="Click me!!" id="myButton">
<script type="text/javascript">
new eventContext("myButton","This is the context")
</script>

In the handleClick method, I want to access the eventContext object,
but how? 'this' is the HTML element to which the event handler was
attached.

 

[Gregor Kofler]

Peter Laman meinte:

I want to create an object that handles mouse events for elements,
based on context information stored in that object. This means that
the event handler must be able to access the context object. How do I
do this? Depending on how I bind the event handler, 'this' will refer
to either the HTML element or the window.

Context object? And you are binding an event listener.

Depending on the DOM the event object provides a target (W3C) or
srcElement (MS) property.

Gregor

 

[Thomas 'PointedEars' Lahn]

function eventContext(elementID, someContext)
{
this.element = document.getElementById(elementID)
this.someContext = someContext

this.handleClick = function(e)
{
????
}

this.element.onclick = this.handleClick

this.element.onclick = function(e) {
// ...
};

but I suggest you prefer the standards-compliant approach and use the on*
properties only as fallback.

And always delimit your assignments with `;'.

}

In the page:

<input type="button" value="Click me!!" id="myButton">
<script type="text/javascript">
new eventContext("myButton","This is the context")

Since you are dumping the object after creation, you really don't need (or
want) this; in that case, and since the `click' event bubbles, use event
delegation instead as Gregor suggested. Besides, constructors are supposed
to start with a capital letter.

</script>

In the handleClick method, I want to access the eventContext object,
but how? 'this' is the HTML element to which the event handler was
attached.

In the event _listener_ (that is not added with attachEvent()), `this' is
(with the exception of the `body' element) a reference to the DOM object
that represents that element. However, `this' outside the method but within
the constructor refers to the constructed object. Go figure it out (hint:
closures).


PointedEars