Question

在元素上添加事件监听器 - Javascript

2011-06-22

86444

javascript dom element event-listener

有没有办法让我从 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>

Answer 1

您这样做没有问题，但是 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 事件。

Answer 2

更好的使用 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>

您在哪里使用这几行并不重要。您可以将其放在头部或正文中。

Answer 3

动态添加事件处理程序的更好方法是使用 jQuery 之类的 JavaScript 库，因为它可以抽象出任何特定于浏览器的细节。