Разница между addEventListener и onreadystatechange

489

12 июня 2022, 04:30

Читал https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest, раздел Отслеживание процесса загрузки. Там приведен код

oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);

и https://developer.mozilla.org/ru/docs/Web/Guide/AJAX/%D0%A1_%D1%87%D0%B5%D0%B3%D0%BE_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C - Шаг 3 -простой пример

httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
function alertContents(httpRequest) {
    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
            alert(httpRequest.responseText);
        } else {
            alert('С запросом возникла проблема.');
        }
    }
}

В чем разница по производимому действию между addEventListener и onreadystatechange в данном конкретном случае?

Answer 1

readystatechange - точно такое же событие, как и load, progress и т.д.

Способов добавить обработчик событию - два

задать соответствующее свойство, начинающееся с on
воспользоваться функцией .addEventListener

Answer 2

Нет никакой разницы. addEventListener() позволяет повесить на событие слушателя не удаляя остальных слушателей. То есть можно повесить на одно событие два разных слушателя или два одинаковых.

Удалить слушателя можно методом removeEventListener().

Подробнее тут: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Можно остановить выполнение цепочки событий методом event.stopPropagation(): https://www.w3schools.com/jsref/event_stoppropagation.asp

Помимо этого можно отменять стандартные действия браузера по текущему событию методом event.preventDefault(): https://www.w3schools.com/jsref/event_preventdefault.asp