XHR2 addEventListener vs property

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.

possible duplicate of [addEventListener vs onclick](http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) — lonesomeday, Oct 31 '13 at 21:56

score 1 · Accepted Answer · answered Oct 31 '13 at 21:58

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.

answered Oct 31 '13 at 21:58

matewka

9,912
2
32
43

XHR2 and FileReader is only supported in IE10 anyway. I should have elaborated a bit, because what I'm curious is about if there is any performance difference and if there is any reason to unbind the event listener if I go for #1. Got any info on that? – Johan Oct 31 '13 at 22:04
1

@Johan, I have no knowledge about which one has a better performance nor is it worth unbinding the event after its job is done. Personally, I __guess__ there's no difference in performance. I can't help you any further, though all I can do is (strongly) recommend you the answer marked as the possible duplicate. Never seen such highly developed answer. I hope it will help you. – matewka Oct 31 '13 at 22:15

XHR2 addEventListener vs property

1 Answers1