Ajout d'écouteurs d'événement sur les éléments - Javascript

Est-il possible pour moi d'écouter pour onblur ou onclick événements en javascript à partir d'une fonction onload? au lieu de le faire dans l'élément lui-même.

<input type="button" id="buttonid" value="click" onclick="func()">

pour devenir quelque chose comme

function onload() {
      var button = document.getElementById("buttonid");
      button.addEventListener("onclick", function() { alert("alert");});
}

MODIFIER

<html>

<head>

     <script>

     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;


     </script>

</head>

<body>

<input type="button" id="buttonid" value="click">


</body>

</html>

Mise à JOUR

 <script type="text/javascript">

 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();


 </script>

source d'informationauteur simplified.

  1. 16

    La façon dont vous le faites est très bien, mais votre écouteur d'événement pour l' click événement devrait être comme ceci:

    button.addEventListener("click", function() { alert("alert");});

    Avis, le click événement doit être fixé avec des "click"pas "onclick".

    Vous pouvez aussi essayer de faire cela à l'ancienne:

    function onload() {
   var button = document.getElementById("buttonid");
   //add onclick event 
   button.onclick = function() { 
        alert("alert");
   }
}

    Mise à jour de 1

    Vous devez également surveiller pour IE < 9, parce que ceux Vs utilisation attachEvent(). Joignez l'événement comme celui-là, donc, il travaillera avec des dinosaures navigateurs:

    if(button.addEventListener){
    button.addEventListener('click', function() { alert("alert");});    
} else if(button.attachEvent){ //IE < 9 :(
    button.attachEvent('onclick', function() { alert("alert");});
}

    Mise à jour 2

    Basé sur votre montage, ce devrait fonctionner fonctionne très bien.

    <html>
    <head>
        <script type="text/javascript">
            function init() {
                var button = document.getElementById("buttonid");
                if(button.addEventListener){
                    button.addEventListener("click", function() { alert("alert");}, false);
                } else if(button.attachEvent){
                    button.attachEvent("onclick", function() { alert("alert");});
                }
            };
            if(window.addEventListener){
                window.addEventListener("load", init, false);
            } else if(window.attachEvent){
                window.attachEvent("onload", init);
            } else{
               document.addEventListener("load", init, false);
            }
        </script>
    </head>
    <body>
        <input type="button" id="buttonid" value="click">
    </body>
</html>

    S'il vous plaît, ne pas utiliser de window.onload = on_load();cela permettra d'éviter tous les autres onload des écouteurs d'événement de licenciement, ou vous risquer pour votre écouteur d'événement pour obtenir écrasé. Pensez à attacher le onload événement de la façon dont je suggère ci-dessus.

  2. 0

    Une meilleure façon d'ajouter dynamiquement des gestionnaires d'événement serait d'utiliser une bibliothèque JavaScript comme jQuery, parce qu'il va abstraire de n'importe quel navigateur détails spécifiques.

  3. 0

    de poursuivre ma conversation dans la section des commentaires...

    @simplifié, essayer de mettre cela dans le < head > de votre page

    <script type="text/javascript">
function my_onload() {
  var button = document.getElementById("buttonid");
  if(button.addEventListener){
    button.addEventListener("click", function() { alert("alert");}, true);
  }else{
    button.attachEvent("click", function() { alert("alert");});
  };
};
window.onload = my_onload;
</script>

    et voir ce qui se passe. aussi, merci de nous conseiller sur le navigateur que vous utilisez.
    https://developer.mozilla.org/en/DOM/element.addEventListener

  4. 0
    <script>
var click = document.getElementById("click");
click.addEventListener("click", function() {
  var required = document.getElementById("required").value;
  if (required===null || required==="") {
    alert("Please make sure all required field are completed");
  }
  else  {
    alert("Thank you! \nYour sumbission has been accepted and you will receive a conformation email shortly! \nYou will now be taken to the Home page.");
  }
});
</script><html>
<body>
<div id="popup">
    <textarea cols="30" rows="2" name="required" id="required"></textarea>
    <input type="submit" id="click" value="Submit">
           <input type="reset" value="Reset" />
</div>
</body>
</html>