Menu
Are there ways for me to listen for onblur or onclick events in javascript from an onload function? instead of doing it in the element itself.
<input type="button" id="buttonid" value="click" onclick="func()">
to become something like
function onload() {
var button = document.getElementById("buttonid");
button.addEventListener("onclick", function() { alert("alert");});
}
EDIT
<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>
UPDATE
<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>
407
You can add event listeners to any DOM object not only HTML elements. i.e the window object. The addEventListener() method makes it easier to control how the event reacts to bubbling.
To set up an event listener you just need to have a variable that references an element and then call the addEventListener function on that element.
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");
}
}
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");});
}
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.
182
The better way it's used DOM (works perfectly) like this. Firs write Yours function/class and use it in:
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>It's doesn't matter where You used this few lines. You can put it in head or in body.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
