如何使用 OnClick 事件调用 JS 函数
Posted
技术标签:
【中文标题】如何使用 OnClick 事件调用 JS 函数【英文标题】：How to Call a JS function using OnClick event 【发布时间】：2014-02-24 00:12:45 【问题描述】：我正在尝试调用我在标题中添加的 JS 函数。
请在下面找到显示我的问题场景的代码。
注意：我无权访问我的应用程序中的正文。
每次我单击带有id="Save" 的元素时，它只调用f1() 而不是fun()。我怎样才能让它呼叫我的fun()？
请帮忙。
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("Save").onclick = function fun()
alert("hello");
//validation code to see State field is mandatory.
function f1()
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
</script>
</head>
<body>
<form name="form1" id="form1" method="post">
State:
<select id="state ID">
<option></option>
<option value="ap">ap</option>
<option value="bp">bp</option>
</select>
</form>
<table><tr><td id="Save" onclick="f1()">click</td></tr></table>
</body>
</html>
【问题讨论】：
f1 根本不应该被调用，因为你有一个运行时错误。另见Why does jQuery or a DOM method such as getElementById not find the element?。但无论如何，func 不会运行，因为您没有在任何地方调用它。
【参考方案1】：
我同意@George。如果我们要通过 javascript 添加或绑定事件监听器到 HTML 元素，我们需要在 DOM 加载后执行。为此，我们可以在 JavaScript 中使用 window.onload() 函数。
<script>
window.onload = function()
document.getElementById("Save").onclick = function fun()
alert("hello");
</script>
另一种方法是在 HTML 中使用 onclick 事件处理程序，如下代码所示：
<div onclick="myFunction()"></div>
<script>
function myFunction()
alert("Hello");
</script>
注意：不建议同时使用这两种方法。因为它会导致一次单击调用两个函数。这很烦人。
【讨论】：
【参考方案2】：您也可以使用iife 使用匿名javascript 函数来执行此操作。 请注意，这被认为是一种不好的做法，尽管在极少数情况下没有其他选择。
...
<span onclick="(function() // function code here )())">click me!</span>
...
【讨论】：
【参考方案3】：使用onclick 属性或将函数应用于您的JS onclick 属性将删除您在<head> 中的onclick 初始化。
您需要做的是添加按钮上的点击事件。为此，您需要 addEventListener 或 attachEvent (IE) 方法。
<!DOCTYPE html>
<html>
<head>
<script>
function addEvent(obj, event, func)
if (obj.addEventListener)
obj.addEventListener(event, func, false);
return true;
else if (obj.attachEvent)
obj.attachEvent('on' + event, func);
else
var f = obj['on' + event];
obj['on' + event] = typeof f === 'function' ? function()
f();
func();
: func
function f1()
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
</script>
</head>
<body>
<form name="form1" id="form1" method="post">
State: <select id="state ID">
<option></option>
<option value="ap">ap</option>
<option value="bp">bp</option>
</select>
</form>
<table><tr><td id="Save" onclick="f1()">click</td></tr></table>
<script>
addEvent(document.getElementById('Save'), 'click', function()
alert('hello');
);
</script>
</body>
</html>
【讨论】：
【参考方案4】：我在你的函数之前删除了你的document.getElementById("Save").onclick =，因为它是一个已经在你的按钮上调用的事件。我还必须通过 onclick 事件分别调用这两个函数。
<!DOCTYPE html>
<html>
<head>
<script>
function fun()
alert("hello");
//validation code to see State field is mandatory.
function f1()
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
</script>
</head>
<body>
<form name="form1" id="form1" method="post">
State:
<select id="state ID">
<option></option>
<option value="ap">ap</option>
<option value="bp">bp</option>
</select>
</form>
<table><tr><td id="Save" onclick="f1(); fun();">click</td></tr></table>
</body>
</html>
【讨论】：
【参考方案5】：您正试图在加载元素之前附加事件侦听器函数。将 fun() 放在 onload 事件侦听器函数中。在此函数中调用f1()，因为onclick 属性将被忽略。
function f1()
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
window.onload = function()
document.getElementById("Save").onclick = function fun()
alert("hello");
f1();
//validation code to see State field is mandatory.
JSFiddle
【讨论】：
我无权访问正文中的代码。我的应用程序与上面的代码不同。无论如何现在，即使按照您的建议，它也只调用 fun() 而不是 f1()。 @VineethVarma 然后请发布您使用过的代码。 @VineethVarma 已编辑。【参考方案6】：您可以使用 addEventListener 添加任意数量的侦听器。
document.getElementById("Save").addEventListener('click',function ()
alert("hello");
//validation code to see State field is mandatory.
);
还要在元素后添加script 标记，以确保在脚本运行时加载Save 元素
您可以在加载 dom 时调用它，而不是移动脚本标签。然后你应该把你的代码放在
document.addEventListener('DOMContentLoaded', function()
document.getElementById("Save").addEventListener('click',function ()
alert("hello");
//validation code to see State field is mandatory.
);
);
example
【讨论】：
【参考方案7】：内联代码的优先级高于其他代码。要调用你的其他函数 func() 从 f1() 调用它。
在你的函数中，添加一行，
function fun ()
// Your code here
function f1()
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
fun ();
重写整个代码，
<!DOCTYPE html>
<html>
<head>
<script>
function fun()
alert("hello");
//validation code to see State field is mandatory.
function f1()
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
fun ();
</script>
</head>
<body>
<form name="form1" id="form1" method="post">
State: <select id="state ID">
<option></option>
<option value="ap">ap</option>
<option value="bp">bp</option>
</select>
</form>
<table><tr><td id="Save" onclick="f1()">click</td></tr></table>
</body>
</html>
【讨论】：
“内联代码的优先级高于其他代码”这是什么意思？以上是关于如何使用 OnClick 事件调用 JS 函数的主要内容，如果未能解决你的问题，请参考以下文章
一个onclick事件触发一个函数,如何将该元素的对象作为函数的参数传过去
如何在 Node.js 中从客户端（例如 html 按钮 onclick）调用服务器端函数？