web-dev-qa-db-ja.com

要素へのイベントリスナーの追加-Javascript

Onload関数からjavascriptでonblurまたはonclickイベントをリッスンする方法はありますか？要素自体で行う代わりに。

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

のようなものになるために

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

編集

<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>

更新

 <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>
javascriptdomelementevent-listener
13
simplified.

方法は問題ありませんが、clickイベントのイベントリスナーは次のようになります。

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

clickイベントには、_"click"_ではなく、_"onclick"_を付加する必要があります。

古い方法でこれを試すこともできます：

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

アップデート1

また、IE <9を監視する必要があります。これらのVはattachEvent()を使用しているためです。

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

更新2

編集に基づいて、これ 動作するはずです 正常に動作します 。

_<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>
_

window.onload = on_load();を使用しないでください。これにより、他のすべてのonloadイベントリスナーが起動されなくなるか、イベントリスナーが上書きされる危険があります。 onloadイベントを上記の方法でアタッチすることを検討してください。

17
Shef

このようにDOMを使用するより良い方法（完全に機能します）。モミはあなたの関数/クラスを書き、それを以下で使用します：

document.addEventListener('DOMContentLoaded', function(){
  // put here code
});
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    function myFunc(){ alert('Hellow there!'); }
    
    document.addEventListener('DOMContentLoaded', function(){
        document.getElementById('mybtn').addEventListener('click', myFunc);
    });
  </script>
</head>
  <body>
    <button id="mybtn">Cklik!</button>
  </body>
</html>

この数行をどこで使用したかは関係ありません。あなたはそれを頭または体に入れることができます。

1
Jerzy Drożdż
<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>
0
Waheed Rahman

コメントセクションで会話を進めるには...

@simplified、これをページの<head>に入れてみてください

<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>

そして何が起こるかを見てください。また、使用しているブラウザについてもお知らせください。 https://developer.mozilla.org/en/DOM/element.addEventListener

0
thescientist

イベントハンドラを動的に追加するより良い方法は、jQueryなどのJavaScriptライブラリを使用することです。これは、ブラウザ固有の詳細を抽象化するためです。

0
FishBasketGordo