FileReader.addEventListener('load', function () ・・の必要性と意味について

（file_reader.html）

<form>
    <label for="file">file</label>
    <input id="file" type="file" />
</form>
<hr /> 
<pre id="result"></pre>
<script src="file_reader.js"></script>

（file_reader.js）

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('file').addEventListener('change', function (e) {
        var input = document.getElementById('file').files[0];
        var reader = new FileReader();
        console.log('bbb');
        reader.addEventListener('load', function () {　　　　　　　・・・①
            console.log('aaa');
            document.getElementById('result').textContent = reader.result;・・・①
        }, true);
        reader.readAsText(input, 'UTF-8');・・・②
        
    }, true);
});

上記のプログラムなのですが、「file_reader.js」を下記のように書き換えると、うまくいかないのはどうしてでしょうか。

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('file').addEventListener('change', function (e) {
        var input = document.getElementById('file').files[0];
        var reader = new FileReader();
        console.log('bbb');
        document.getElementById('result').textContent = reader.result;
        reader.readAsText(input, 'UTF-8');
    }, true);
});

①のreader.addEventListener('load', function () ・・・で囲むことで、FileReaderオブジェクトのインスタンスオブジェクトを読み込んでからdocument.getElementById('result').textContentプロパティに代入されるようにしていますが、readerを読み込む必要があるのはどうしてなのかがわからないです。
そもそもFileReaderオブジェクトについて、テキストでもファイルの読み込みに必要と書かれてあるだけで、これが何なのかがよくわかりません。
ファイルの読み込み処理はreader.readAsText(input, 'UTF-8');で行っているのではないでしょうか。

###追記
すみません、もう一点教えていただきたいのですが、onloadプロパティを用いて以下のように書き換えてもうまくいきません。
reader.addEventListener('load', function () ・・・を使うのとonloadプロパティを用いるのとで何が異なるのでしょうか。

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('file').addEventListener('change', function (e) {
        var input = document.getElementById('file').files[0];
        var reader = new FileReader();
        console.log('bbb');
        reader.onload = function(){
            document.getElementById('result').textContent = reader.result;
            reader.readAsText(input, 'UTF-8');
        };
        
    }, true);
});

##追記
下記の通り修正したところ正常にできました。
ご指定誠にありがとうございました。

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('file').addEventListener('change', function (e) {
        var input = document.getElementById('file').files[0];
        var reader = new FileReader();
        console.log('bbb');
        reader.onload = function(){
            document.getElementById('result').textContent = reader.result;
        };
        reader.readAsText(input, 'UTF-8');
        
    }, true);
});