readystatechange using addEventListener versus old-style property?

Question

readystatechange is a standard event for XMLHttpRequest objects, and so should be able to have functions listen on the event either using

r.onreadystatechange = function() { ... };

as well as

r.addEventListener('readystatechange', function() { ... }, false);

However, the latter method only seems to work in Firefox and Chrome, but not Opera, which does not throw an error but simply has no effect. Why is this, and is this even correct behaviour?

Answer 1

The MDN docs on XMLHttpRequest don't specifically mention raising a readystatechange event, but the W3C docs do require it.

That combined with the general rule "onxxx is the event handler for event xxx" would imply that the Opera behaviour is incorrect.

Answer 2

This worked for me.

xhr.addEventListener('readystatechange', evt => {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
        return this.responseText;
    }
}, false);