'readystatechange' doesn't seem to work with the XMLHttpRequest

Question

I'm trying to get data from jsonplaceholder with XMLHttpRequest(), however, my readystatechange event doesn't work.

I tried to change the request.addEventListener('readystatechange'... to document.addEventListener('click'... and it worked eventually this way.

const getData = (source) => {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.addEventListener('readystatechange', () => {
            if (request.readyState === 4 && request.status === 200) {
                let todos = JSON.parse(request.responseText);
                resolve(todos);
            } else if (request.readyState == 4) {
                reject('An error occured!');
            }

            request.open('GET', source);
            request.send();
        });
    });
};

getData('https://jsonplaceholder.typicode.com/todos')
    .then((data) => console.log(data))
    .catch((err) => console.log(err));

I'm using Chrome btw, do you think it may be the problem?