Event Dispatching

In certain situations, I have found it useful to have a reference to the original element from which an event was dispatched. e.g. onclick="dispatch(event,this)", the 'this' part. But this requires making a change to the core code base, which I generally think is bad Idea. The change I made to provide this functionality was in html.js
(the dispatch function)

obj.dispatch = function( event, element ) {
...
line 660
from 
target[type].call(obj, event);
to
target[type].call(obj, event, element);
...
}

Is there a better way to provides the HTML object from which the event was generated to the event handler?

In most cases this.element() when called from within an event handler returns reference to the event target element. There is only one exception (see below).

// simple element
var obj1 = new Active.HTML.DIV;
obj1.setId("element");
obj1.setContent("content", "Click me");

// event handler
var clickHandler = function(event){

    // event target
    var target = this.element();
    alert(target.outerHTML);
}

obj1.setEvent("onclick", clickHandler);
document.write(obj1);

You should distinguish between the event source, i.e. the element, from which the event starts bubbling up, and the event target, i.e. where the event is captured by the event handler.

// content element
var content = new Active.HTML.SPAN;
content.setContent("text", "Click me again");

// container element
var obj2 = new Active.HTML.DIV;
obj2.setId("container");
obj2.setContent("content", content);

// event handler
var clickHandler = function(event){

    // event source
    // bubbles up from this element
    var source = event.srcElement;
    alert("Source: " + source.outerHTML);

    // event target
    // we capture event here and dispatch to JS object
    var target = this.element();
    alert("Target: " + target.outerHTML);
}

obj2.setEvent("onclick", clickHandler);
document.write(obj2);

The only exception, where this.element() does not return you the event target, is when you assign the event handler to the static content and not the container object. In this case the event handler is still executed as method of the container. So this refers to the container and this.element() refers to the container DOM element.

// content element
var content = new Active.HTML.SPAN;
content.setContent("text", "Click me once more");

// event handler
var clickHandler = function(event){

    // event source
    var source = event.srcElement;
    alert("Source: " + source.outerHTML);

    // event is still dispatched to the container
    var container = this.element();
    alert("Container: " + container.outerHTML);
}

content.setEvent("onclick", clickHandler);

// container element
var obj3 = new Active.HTML.DIV;
obj3.setId("_container");
obj3.setContent("content", content);
document.write(obj3);

However in this case you know upfront from which content element the event came from, so the explicit reference is not necessary (?)

Thanks for the informative reply. The second example you provided was precisely my problem. Specifically the problem I had was the checkbox input template you helped me with on another post (Thanks again, by the way, that worked like a charm).

The purpose of the template I was creating was to insure that the checkbox template sent a value to the server regardless of checked status, so the template maintains a hidden internal input element, a visible checkbox input element, and a label (span) element, all wrapped up in a Div container. The template also maintains checked and unchecked value properties which are synched to the hidden input when the state of the checkbox in the template is altered (checkbox's onclick event). All of that being said, my the problem which I failed to solve, without hacking the core lib, was to determine the input.checked boolean property of the checkbox element.

event.srcElement is the answer I needed, thank you very much!

I will post the template here after I fix a few bugs in it.