XHR2 addEventListener与属性

Question

var _xhr2 = new XMLHttpRequest();

_xhr2.upload.addEventListener('progress', function(e){ //#1
   console.log('progress');       
}, false);

_xhr2.upload.onprogress = function(e){ //#2
    console.log('progress'); 
};

_xhr2.open('POST', '/fileupload');
_xhr2.send(formData);

Could someone explain the difference between #1 and #2 above. Which one is preferred over the other? Because both seems to work.

The reason that I'm asking is because I'm playing around a bit with the HTML5 filereader + XHR2 upload, and in the MDN examples instances of FileReader() uses #2 , while XMLHttpRequest() uses #1 .

Answer 1

Well, declaring onprogress property will overwrite the previous handlers bound to it, that's obvious and that's not the issue in you case because you're bounding it only to the new object instance.

I think the only difference is IE compatibility. addEventListener is supported for IE9+ while onprogress property (as well as other on... properties) is supported for IE5.5+.

Note :
Older versions of IE than 9 use attachEvent instead of addEventListener .