JavaScript - event relatedTarget is not working for onClick

I am getting an error when I use event.relatedTarget for a onClick only, however it works well for onMouseout.

This is the code I have:

<html>
  <head>
    <style type="text/css">
      #layer1 {
        width: 370px;
        height: 220px;
        background-color: yellow;
      }
      #layer2 {
        position: relative;
        width: 130px;
        height: 47px;
        top: 10px;
        left: 10px;
        background-color: #CC0066;
      }
      #layer3 {
        position: relative;
        width: 200px;
        height: 100px;
        top: 10px;
        left: 150px;
        background-color: #334466;
      }

      #button1 {
        position: relative;
        top: 4px;
        left: 4px;
      }

      #button2 {
        position: relative;
        top: 4px;
        left: 4px;
      }
    </style>
  <body>
   <div id="layer1">
    <div id = "layer2">
      <input type="submit" id = "button1" value="Button 1 (onclick)"></input>
    </div>
    <div id = "layer3">
      <input type="submit" id = "button2" value="Button 2 (onmouseout)"></input>
    </div>
   </div>
   <script type="text/javascript">
    document.getElementsByTagName("body")[0].addEventListener("click", function() {print(event);}, false);
    document.getElementsByTagName("div")[0].addEventListener("click", function() {print(event);}, false);
    document.getElementsByTagName("div")[1].addEventListener("click", function() {print(event);}, false);
    document.getElementsByTagName("input")[0].addEventListener("click", function() {print(event);}, false);

    document.getElementsByTagName("div")[2].addEventListener("mouseout", function() {print(event);}, false);
    document.getElementsByTagName("input")[1].addEventListener("mouseout", function() {print(event);}, false);
    function print(elem) {
        alert("JavaScript alert\n\n" +
            "Element\n" + 
            "   Type: " + elem.relatedTarget.tagName + 
            "\n   Id: " + elem.relatedTarget.id +
            "\nEvent's name: " + elem.type +
            "\nMouse's coordinates" + 
            "\n   Screen: " + elem.screenX + ", " + elem.screenY +
            "\n   Window: " + elem.clientX + ", " + elem.clientY +
            "\n   HTML item: " + elem.offsetX + ", " + elem.offsetY);
    }
   </script>
  </body>
</html>

Error when I click on the item: https://i.sstatic.net/KJ5We.png

Although, with mouseout it works properly: https://i.sstatic.net/kuwrH.png

I do not understand what is wrong since I am using the same function, it only changes the type of event.

Thank you in advance.

Solution

I fixed these two lines in order to receive the expected results:

"   Type: " + elem.target.nodeName +
"\n   Id: " + elem.target.getAttribute("id") +

Hopefully, this helps

document.getElementsByTagName("body")[0].addEventListener("click", function() {
  print(event);
}, false);
document.getElementsByTagName("div")[0].addEventListener("click", function() {
  print(event);
}, false);
document.getElementsByTagName("div")[1].addEventListener("click", function() {
  print(event);
}, false);
document.getElementsByTagName("input")[0].addEventListener("click", function() {
  print(event);
}, false);

document.getElementsByTagName("div")[2].addEventListener("mouseout", function() {
  print(event);
}, false);
document.getElementsByTagName("input")[1].addEventListener("mouseout", function() {
  print(event);
}, false);

function print(elem) {
  alert("JavaScript alert\n\n" +
    "Element\n" +
    "   Type: " + elem.target.nodeName +
    "\n   Id: " + elem.target.getAttribute("id") +
    "\nEvent's name: " + elem.type +
    "\nMouse's coordinates" +
    "\n   Screen: " + elem.screenX + ", " + elem.screenY +
    "\n   Window: " + elem.clientX + ", " + elem.clientY +
    "\n   HTML item: " + elem.offsetX + ", " + elem.offsetY);
}

#layer1 {
  width: 370px;
  height: 220px;
  background-color: yellow;
}

#layer2 {
  position: relative;
  width: 130px;
  height: 47px;
  top: 10px;
  left: 10px;
  background-color: #CC0066;
}

#layer3 {
  position: relative;
  width: 200px;
  height: 100px;
  top: 10px;
  left: 150px;
  background-color: #334466;
}

#button1 {
  position: relative;
  top: 4px;
  left: 4px;
}

#button2 {
  position: relative;
  top: 4px;
  left: 4px;
}

<html>

<head>

  <body>
    <div id="layer1">
      <div id="layer2">
        <input type="submit" id="button1" value="Button 1 (onclick)"></input>
      </div>
      <div id="layer3">
        <input type="submit" id="button2" value="Button 2 (onmouseout)"></input>
      </div>
    </div>
  </body>

</html>