在元素上添加事件侦听器 - Javascript [英] Adding Event Listeners on Elements - Javascript
问题描述
有没有办法让我从onload函数在javascript中收听onblur或onclick事件?而不是在元素本身中执行。
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()">
成为
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>
推荐答案
您正在做的这样做很好,但您的事件监听器点击
事件应该是这样的: / p>
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");});
请注意,应附加点击
事件使用点击
,而不是onclick
。
Notice, the click
event should be attached with "click"
, not "onclick"
.
你也可以尝试这样做:
function onload() {
var button = document.getElementById("buttonid");
// add onclick event
button.onclick = function() {
alert("alert");
}
}
更新1
您还需要监视IE< 9,因为那些Vs使用 attachEvent()
。附加这样的事件,所以它可以与恐龙浏览器一起工作:
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");});
}
更新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
事件。
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.
这篇关于在元素上添加事件侦听器 - Javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!