Get active DOM element, when event.target is XMLHttpRequest

Question

I need to get attribute value of clicked element, but I have an ajax request by click and in this case event.target is XMLHttpRequest instead of clicked DOM element. How can I get the clicked DOM element in this situation?

// Parsing and makeup.
function showDescription(XMLObj){
    var parser = new DOMParser(),
    XMLDoc = XMLObj.responseText,
    parsedXMLDoc = parser.parseFromString(XMLDoc, 'text/xml'),

    eventTarget = event.target,
    descContent = document.getElementById('description') ;

    // Conditional actions.
    };
};

// Create request.
function loadAsync(url, callback) {
    var request;
    if(window.XMLHttpRequest) {
        request = new XMLHttpRequest();
        request.open("GET", url, true);
        request.send(null);
        request.onreadystatechange = requestProcess;
    } else if(window.ActiveXObject){
        request = new ActiveXObject('Microsoft.XMLHTTP');
        if (request) {
            request.open("GET", url, true);
            request.send(null);
            request.onreadystatechange = requestProcess;
        }
    }

    function requestProcess() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                if (typeof callback == 'function') {
                    callback(request)
                }
            }
        }
    };
};

// Define event listener for each menu element.
function showDescListener(){
    var descPars = document.getElementById('description-paragraphs'),
    descParLi = descPars.getElementsByTagName('li');

    for (var i = 0; i < descParLi.length; i++){
        descParLi[i].addEventListener('click', function(event) {loadAsync('/description/', showDescription)}, false);
    }
};

Answer 1

Change

function showDescription(XMLObj){

to

function showDescription(XMLObj, target){

Then change

descParLi[i].addEventListener('click', function(event) {loadAsync('/description/', showDescription)}, false);

to

descParLi[i].addEventListener('click', function(ev) {loadAsync('/description/', function(request) { showDescription(request, ev.target); })}, false);

And then use target inside showDescription .

---

This change captures the event at the time the button was clicked in a closure, which is then used in the callback. In other words, notice how the ev parameter is used by the callback function -- the value of ev is preserved when the callback is called, and its target property (the DOM element you want) is then passed into showDescription .