Prevent Default Magic

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Prevent Default Magic</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="div1">
      div1
      <p>Try to type someting in `input3`</p>
       <div id="div2">
         div2
          <input id="input3" type="text" placeholder="input3">
       </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

(function(doc){
  'use strict';
  
  var div1 = doc.getElementById('div1');
  
  //The mechanism of preventDefault is just different from bubbling
  div1.addEventListener('keydown', function(e){
      e.preventDefault();
  }, false);
  
}(document));

html, body{
  width: 100%;
}
#div1{
  width: 300px;
  height: 300px;
  margin: auto;
  background-color: gray;
  position: relative;
  color: #fff;
}

#div2{
  color: #000;
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: yellow;
  top: 50%;
  margin-top: -75px;
  margin-left: 75px;
}

#input3{
  width: 100%;
  margin: 0;
  padding: 0;
  border-width: 0;
  margin-top: 50px;
}