What makes onclick different than addEventListener?

Hello!
This post is actually just my curious. Recently I encountred the title problem. It may be worn-out but your help, your comment, anything is very welcome!

Let's start with the answer, what makes onclick different than addEventListener is the same footing, in other words the languages themselves.
The point is, onclick is an HTML for addEventListener, whilst addEventListener is a JavaScript for onclick.
Examples below would help you to understand.

If you make an HTML file and write JavaScript directly in the file or read a JavaScript file in the HTML file, the HTML and the JavaScript are on the same footing. In this case, nothing makes onclick different than addEventListener.

However, ajax makes the story be changed. Let's think about an example below.

<hello.html>

<div id="hello" onclick="ajax()" style="cursor: pointer;">Hello!</div>
<script>
    function ajax(){
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                document.body.innerHTML = this.responseText;
            }
        };
        ajax.open("GET", "hello2.html", true);
        ajax.send();
    }
</script>

If you click the text Hello!, the content displayed is changed to the content in hello2.html. hello2.html is as follows.

<hello2.html>

<div id="hello2" onclick="next()">How are you?</div>

The problem is the next step. Where should the content of the next function be written in?

If you click the Hello!, the How are you? is displayed because the content of the whole body was changed by the ajax. So, now, we see hello2.html and so the next function should be written in hello2.html or should be read as the corresponding JavaScript file in hello2.html. Namely,

<hello2.html>

<div id="hello2" onclick="next()">How are you?</div>
<script>
    function next(){
        document.getElementById("hello2").style.color = "red";
    }
</script>

However, if you do this, "next is not a function" is returned.

How about using addEventListener instead of onclick? Namely, we use

<hello2.html>

<div id="hello2">How are you?</div>

<script>
document.getElementById("hello2").addEventListener("click", function(){
    document.getElementById("hello2").style.color = "red";
});
</script>

If you do this, the answer is, nothing happens actually.

The point is, we notice that the URL would not be changed. Well, if you do these in hello.html, what happens? What changes?

Actually, something fantastic a bit happens. If you do the latter in hello.html, the answer is, "Cannot read property 'addEventListener' of null" is returned, whilst if you do the former in hello.html, the colour of text "How are you?" is changed to red.

This happens namely because (the content of )hello2.html is displayed by the ajax but the URL is not changed, in other words hello.html is still opened.

Let's go back to the beginning of the story. onclick is an HTML, so it should be written directly in an HTML file or inside an HTML element it should be. On the one hand, addEventListener is a JavaScript, so it should be written in an HTML file which is opened, namely the URL.
In the example, hello2.html was displayed by the ajax but was not opened. This is why addEventListener written in hello2.html was not read, and that written in hello.html was null because hello2.html was not opened.

Finally, there is one more thing I have to say. The best way to avoid such a thing is finding more sophisticated realisation of the example.
Thank you for reading!