向addEventListener注册的Chrome事件未在“点击”时触发

Question

I developed a small web app using js. The app is working as expected in mozilla ff browser. On window load triggers an ajax request, which, on success alters the dom - includes a small select element and adds options to it, each of them getting an eventListener. Here are some relevant extracts:

var lst = null;
window.onload=init;
function init() {
$.ajax({
    data : {
        type : 'someType',
        sender : 'someSender'
    },
    beforeSend : function () {
    },
    success : function (response) {
        response = JSON.parse(response);
        if (response.links.constructor === Array) {
            dispNavList(document.getElementById("navProxy"), response.links);
            atch();
        }
        if (response.data.constructor === Array) {
            dispTable(document.getElementById("dataProxy"), response.data);
            if (response.data.length > 0) {
                setTimeout("refresh()", 1000);
            }
        }
    },
    complete : function () {
    }
});}
function dispNavList(proxy, v) {
if (lst != null) {
    dtch();
    lst = null;
}
proxy.innerHTML = null;
if (v.length > 0) {
    lst = document.createElement('select');
    var i = 0;
    while (i < v.length) {
        var opt = document.createElement('option');
        opt.setAttribute('value', v[i].ename);
        opt.appendChild(document.createTextNode(v[i].dscr));
        lst.appendChild(opt);
        i = i + 1;
    }
    proxy.appendChild(document.createElement("p").appendChild(document.createTextNode('Data fetched @:' + timenow())));
    proxy.appendChild(lst);
} else {
    proxy.appendChild(document.createElement("p").appendChild(document.createTextNode('Data fetch failed @:' + timenow())))
}}
function atch() {
if (lst != null) {
    var options = lst.querySelectorAll("option");
    if (options.length != "undefined") {
        [].forEach.call(options,
            function (e) {
                                console.log('inside');
            e.addEventListener('click', caller,false);//.bind(e), false);
        })
    }
}}
function caller(event) {
    console.log(event.target.nodeType);
    return;
/*var arr = {
    type : 'd',
    sender : this.getAttribute('value')
};
$.ajax({
    data : arr,
    beforeSend : function () {
        clearTimeout(aTout);
        aTout = null;
    },
    success : function (response) {
        clearTimeout(aTout);
        aTout = null;
        response = JSON.parse(response);
        if (response.links.constructor === Array) {
            dispNavList(document.getElementById("navProxy"), response.links);
            atch();
        }
        if (response.data.constructor === Array) {
            dispTable(document.getElementById("dataProxy"), response.data);
            //alert(response.data.length);
            if (response.data.length > 0) {
                setTimeout("refresh()", 1000);
            }
        }
    },
    complete : function () {
        }
    }
});*/}

dtch() function is the reverse of atch() removing the eventlisteners. There are some comments there because i tried first of all to bind this object to the option (in function atch()) and it successfully does so while caller function didn't have at first an argument (event - i've tried this following examples from online books), it just recognized this object appropriately (in ffox). The problem is that caller() isn't invoked on click despite the fact that the eventListener is properly attached (checked it in developer tools). If something's missing (code, other info etc.) please ask and i'll provide them. Also please ignore other commented code, the app is under construction and i'm trying various things. Even if there are small syntax errors i guarantee that i have a working code for ffox.

Answer 1

Sorry for posting a duplicate question. You can get the answer @ addEventListener working in firefox but not in chrome . So alter the event type to 'change' on the select element and get option selected through

selectElement.options[selectElement.selectedIndex].value