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

有没有办法从onload函数监听javascript中的onblur或onclick事件？而不是在元素本身中执行

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

编辑

函数onload（）{
var button=document.getElementById（“buttonid”）；
if（按钮。addEventListener）{
addEventListener（“单击”，函数（）{alert（“alert”）；}）；
}否则{
attachEvent（“单击”，函数（）{alert（“alert”）；}）；
};
};
window.onload=onload；

更新

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

加载时的函数（）{
var button=document.getElementById（“buttonid”）；
if（按钮。addEventListener）{
addEventListener（“单击”，函数（）{alert（“alert”）；}）；
}否则{
attachEvent（“单击”，函数（）{alert（“alert”）；}）；
};
};
window.onload=on_load（）；

---

您的操作方式很好，但是

单击事件的事件侦听器应该如下所示：

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，因为这些Vs使用
attachEvent（）
。像这样附加事件，以便在恐龙浏览器中使用：

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

if（按钮addEventListener）{
addEventListener（'click'，function（）{alert（“alert”）；}）；
}如果（按钮附件）{//IE<9:(
attachEvent（'onclick'，function（）{alert（“alert”）；}）；
}

更新2
根据您的编辑，这应该是可行的


函数init（）{
var button=document.getElementById（“buttonid”）；
if（按钮。addEventListener）{
addEventListener（“单击”，函数（）{alert（“alert”）；}，false）；
}else if（按钮附件）{
attachEvent（“onclick”，function（）{alert（“alert”）；}）；
}
};
if（window.addEventListener）{
addEventListener（“加载”，init，false）；
}else if（窗口附件）{
window.attachEvent（“onload”，init）；
}否则{
文件。addEventListener（“加载”，初始，错误）；
}

请不要使用
window.onload=on_load（）这将阻止所有其他的<代码> OnLoad 事件侦听器被触发，或者您的事件监听器可能被重写。请考虑上面提到的<>代码> OnLoad 事件。
 < P>一个更好的动态添加事件处理程序的方法是使用像jQuery这样的JavaScript库，因为it将抽象掉任何特定于浏览器的详细信息。
要在评论部分进一步展开我的对话

@简而言之，试着把它放在页面的

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


函数my_onload（）{
var button=document.getElementById（“buttonid”）；
if（按钮。addEventListener）{
addEventListener（“单击”，函数（）{alert（“alert”）；}，true）；
}否则{
attachEvent（“单击”，函数（）{alert（“alert”）；}）；
};
};
window.onload=my_onload；

看看会发生什么。另外，请告诉我们您使用的浏览器。

var click=document.getElementById（“click”）；
click.addEventListener（“click”，function（））{
var required=document.getElementById（“required”）.value；
如果（必需===null | |必需===“”）{
警告（“请确保所有必填字段均已填写”）；
}
否则{
提醒（“谢谢！\n您的消费已被接受，您将很快收到确认电子邮件！\n您现在将被带到主页。”）；
}
});
更好的使用方法是这样使用DOM（工作完美）。
首先编写您的函数/类，并在以下情况下使用它：


document.addEventListener（'DOMContentLoaded'，function（）{
//把代码放在这里
})；

函数myFunc（）{alert（'Hellow there！'）；}
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'mybtn'）。addEventListener（'click'，myFunc）；
});
克力克！
如果你的意思是window.onload=onload，那么这就行了，或者类似的东西。你试过你的例子看看会发生什么吗？@科学家它实际上对我不起作用，也许我在某个地方有一些错误。如果你查看错误控制台，你可能会找到答案。但是，它已经被提供了-'单击'与'单击'@thescientist我已尝试将onclick更改为click，但仍然不起作用。让我看看错误控制台，看看它说了什么。谢谢。我提到的另一个重要注意事项是，如何调用onload？我建议将其分配为window.onload，以确保DOM在该函数中引用之前准备就绪。你这样做了吗？@FishBasketGordo谢谢您的回答是，您介意解释特定于浏览器的详细信息的含义吗？例如，Firefox使用
addEventListener
注册事件处理程序（这是标准方法），而IE使用
attachEvent
做同样的事情。使用jQuery，您可以调用相同的函数（
bind
或其速记版本之一，如
单击
）无论您使用的是哪种浏览器。@FishBasketGordo ohh，这是否意味着如果我决定不使用jquery，为了使代码与大多数浏览器兼容，我必须编写一个if-else来检查？@simplified，这是正确的。使用像jquery这样的框架的一个最好的功能是，大多数恼人的浏览器er Compatibility gotchas是在框架中处理的，因此，不必在代码中处理。@FishBasketGordo谢谢。但是为了创建独立的东西而放弃使用库有什么意义吗
if(button.addEventListener){
    button.addEventListener('click', function() { alert("alert");});    
} else if(button.attachEvent){ // IE < 9 :(
    button.attachEvent('onclick', function() { alert("alert");});
}

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

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

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