Javascript:代码在加载时调用,但应该在发生点击事件时运行
Javascript: Code is called on load but should run when a click event happened
我试图理解Javascript事件处理。我喜欢在按下按钮并添加事件侦听器时调用一些代码 - 我的代码:
<html>
<head>
<title>
PDSA #4.4: Event Registering
</title>
<script>
function changeTheButton(btn){
btn.innerHTML = "Please, don't press again!";
alert("Changed the button");
}
function init(){
btn = document.getElementById("button1");
btn.addEventListener("click", changeTheButton(btn), false);
}
</script>
</head>
<body onload="init()">
<form>
<button id="button1">Don't press this button</button>
</form>
</body>
</html>
当我在Chrome或Firefox中打开这个网站时,按钮上的文字已经是"请不要再按了!"并且在我做任何事情之前打开了警报。
为什么会这样?我希望当我按下按钮而不是加载时会发生这种情况。
提前感谢您的任何帮助安德烈
请看这一行:
btn.addEventListener("click", changeTheButton(btn), false);
你实际上在那里打电话给changeTheButton
,导致alert
.您可能希望将其注册为事件处理程序,从而将警报推迟到按下按钮:
btn.addEventListener("click", function() { changeTheButton(btn) }, false);
您可以在jsFiddle上观看结果。
您可能会遇到的另一个问题是,单击按钮会导致页面重新加载,因为仍会调用默认事件处理程序。您可以通过在事件实例上调用 .preventDefault()
来防止这种情况:
function changeTheButton(ev, btn) {
alert("Changed the button");
btn.innerHTML = "Please, don't press again!";
ev.preventDefault();
}
function init(){
btn = document.getElementById("button1");
btn.addEventListener("click", function(ev) {
changeTheButton(ev, btn)
}, false);
}
演示。
相关文章:
- 多个jQuery.on()事件无法运行xBrowser(取决于顺序)
- 单击按钮前运行事件
- 错误“;未处理'错误'事件“;在运行yo发电机之后
- JavaScript运行时事件循环现有技术
- 在单击事件中,第一次单击时激发代码一次,其余代码在所有单击时运行
- 如何在表单提交事件后运行JavaScript*
- 在on.change事件之后运行函数
- 在按钮'上运行PHP代码;s onclick事件,或者使用Ajax
- 如何使函数与.onsubmit事件一起运行
- 在加载多页模板Jquery Mobile的页面后运行事件
- 在javascript中,无法在运行时获取按钮的onClick事件的函数
- jQuery事件将只运行一次
- 在iPad上运行时,Mobile Safari中即将切换选项卡的Pagehide事件不会触发
- jQuery的事件处理程序运行良好,但应该't,因为它's不在ready()函数中
- 事件只运行一次
- 在onclick事件上运行PHP代码
- 滚动事件运行缓慢-有没有更轻松的方法
- 单击在焦点丢失之前注册的位置,但在焦点丢失后运行事件
- 如何在单击时运行事件加载
- 按钮由数据表生成,运行事件两次