title: Adding Event Listeners on Elements - Javascript
body: <p>Are there ways for me to listen for onblur or onclick events in javascript from an onload function? instead of doing it in the element itself.</p>
  
  <pre><code>&lt;input type="button" id="buttonid" value="click" onclick="func()"&gt;
  </code></pre>
  
  <p>to become something like</p>
  
  <pre><code>function onload() {
        var button = document.getElementById("buttonid");
        button.addEventListener("onclick", function() { alert("alert");});
  }
  </code></pre>
  
  <p>EDIT</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
       &lt;script&gt;
  
       function onload() {
  
          var button = document.getElementById("buttonid");
  
          if(button.addEventListener){
               button.addEventListener("click", function() { alert("alert");});
          } else {
               button.attachEvent("click", function() { alert("alert");});
          };
       };
  
            window.onload = onload;
  
  
       &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;input type="button" id="buttonid" value="click"&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE</p>
  
  <p></p>
  
  <p></p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  
   function on_load() {
  
      var button = document.getElementById("buttonid");
  
      if(button.addEventListener){
           button.addEventListener("click", function() { alert("alert");});
      } else {
           button.attachEvent("click", function() { alert("alert");});
      };
   };
  
        window.onload = on_load();
  
  
   &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p></p>
  
  <p></p>
  
  <p></p>