The way you are doing it is fine, but your event listener for the click event should be like this:
button.addEventListener("click", function() { alert("alert");});
Notice, the click event should be attached with "click", not "onclick".
You can also try doing this the old way:
function onload() {
var button = document.getElementById("buttonid");
// add onclick event
button.onclick = function() {
alert("alert");
}
}
Update 1
You need to also monitor for IE < 9, because those Vs use attachEvent(). Attach the event like this, so it will work with dinosaur browsers:
if(button.addEventListener){
button.addEventListener('click', function() { alert("alert");});
} else if(button.attachEvent){ // IE < 9 :(
button.attachEvent('onclick', function() { alert("alert");});
}
Update 2
Based on your edit, this should work works just fine.
<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>
Please, do not use window.onload = on_load();, this will prevent all other onload event listeners from getting fired, or you are risking for your event listener to get overwritten. Consider attaching the onload event the way I am suggesting above.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
