JavaScript为什么我运行的结果和书上的不一样

问题相关代码,请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
        border: 1px solid red;
        width: 50%;
        height: 200px;
        background-color: azure;
      }
    </style>
</head>
<body>
  <div id="div"></div>
</body>
    <script>
        var id = document.getElementById("div");
        function print(str) {
            return id.innerText += str + "\n";
        }

        document.onload =  print("document.onload");
        window.onload =  print("window.onload");
        id.onload = print("div.onload");

        window.addEventListener("load" , function () {
            print("window.addEventListener");
        });
        document.addEventListener("DOMContentLoaded" , function () {
            print("document.addEventListener");
        });
        id.addEventListener("load" , function () {
            print("id.addEventListener");
        });

    </script>
    <script src="test.js"></script>
</html>

运行结果及报错内容

我运行的结果

img


书上代码

img


书上运行结果

img

我想要达到的结果

书上的监听器可以使用,我写的监听器就不能使用,而且书上监听器在onload方法前,而我写的却在onload方法后,怎么回事

书本上采用的浏览器和你的不一样运行结果可能会有一点差异

你写的代码和书上的不一样,那结果不一样 有什么 奇怪的。