Event context


P

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.
 
Ad

Advertisements

G

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
 
Ad

Advertisements

T

Thomas 'PointedEars' Lahn

Peter said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top