Modify `target` of mouseEvent object for Event Delegation

Question

Is it possible to modify the target property of a mouseEvent? I have an event delegator function, delegator(parentSelector, childSelector, event, callback) , which is used to bind events listeners to parent dom nodes (useful when child nodes are replaced dynamically).

This works very well, except in the case the the click occurs on a childNode of the childSelector. For example, an event is bound to the body , to listen for clicks on a.clickHere , which also contains a span. If the span is clicked, it is returned as the event.target , rather than the a.clickHere node.

I have tried adding properties to the event object within the delegator function (which works), but am unable to overwrite the existing property, target :

e.myProperty = "hello world" //works
e.target = currentTarget; //doesn't seem to work

This is my event delegator function, with a polyfill for the element.matches function:

//Event Delegator function
delegator = function(parentSelector, childSelector, event, callback){

    //get a nodelist of each possible parent
    var parents = document.querySelectorAll(parentSelector);

    //bind event listener to each possible parent
    for(var i = 0; i < parents.length; i++){

        parents[i].addEventListener(event, function(e){
            var currentTarget = e.target;

            //loop while the currentTarget isn't the parent selector or the html tag
            while(!matches(currentTarget, parentSelector) && !matches(currentTarget,'html')){

                //found it! currentTarget is what I was looking for
                if(matches(currentTarget,childSelector)){
                    //try to overwrite e.target with the "intended" target
                    e.target = currentTarget;
                    //execute the callback function and end
                    callback.call(this, e);
                    break;
                }

                //didn't find it yet. walk up the dom
                currentTarget = currentTarget.parentNode;
            }

        }, false);
    }
};

//Matches polyfill
matches = function(element, selector){
    var api = ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector'];
    for(var a in api){
        if(typeof element[api[a]] === 'function'){
            return element[api[a]](selector);
        }
    }
};

This code would be called like this:

delegate('body', '.search-filter a', 'click', function(event){
    var theLink = event.target; //might be a node inside the a, such as a span.
});

With this html

<div class="search-filter">
    <a>Do Work <span>(or not!)</span></a>
</div>

So, is there any way to write to that property, or alternative return a copy of the event object with the modified value?

Answer 1

The target of a mouseEvent is read only, so you won't be able to modify it with traditional methods. However, you can set a new variable, for instance:

e.desiredTarget = currentTarget;

Then you can reference e.desiredTarget anywhere that you want to use e.target .