jQuery 以编程方式调用 onclick 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15165897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
call onclick attribute programmatically
提问by Scott Selby
I have a bunch of <a>tags on a page that look something like
我<a>在页面上有一堆标签，看起来像
<a href="#" id="001" onclick="fnaaa();" >...</a>
...
<a href="#" id="002" onclick="fnaba();" >...</a>
...
<a href="#" id="003" onclick="fncda();" >...</a>
//sometimes maybe like this
<a href="#" id="004" onclick="fnagg(); return false;" >...</a>
...
Now I have the id passed to the page as a query string , so I originally wanted to do something like
现在我将 id 作为查询字符串传递给页面，所以我最初想做类似的事情
$('a[id="' + id + '"]').click();
$('a[id="' + id + '"]').trigger("click");
it turns out both of those are not allowed , so if I have the id , how can I call the function that is written in the onclick attribute? I know I can probably get it like this
事实证明这两个都是不允许的，所以如果我有 id ，我如何调用写在 onclick 属性中的函数？我知道我可能会像这样得到它
var funcToCall = $('a[id="' + id + '"]').attr('onclick');
but how do I call this funcToCall? remembering that funcToCall may be more then just a function name ex. "fnagg(); return false;"
但是我怎么称呼这个 funcToCall 呢？记住 funcToCall 可能不仅仅是一个函数名称，例如。“fnagg()；返回假；”
回答by Josh Stodola
First of all, the ID attribute has some restrictions, one being that it must start with a letter. After you fix that, I would recommend notusing an inline onclickhandler.
首先，ID 属性有一些限制，一个是它必须以字母开头。在你解决这个问题后，我建议不要使用内联onclick处理程序。
$("#ID_HERE").click(function(e) {
fnaaa();
e.preventDefault();
});
Then you can trigger it easily:
然后你可以轻松触发它：
$("#ID_HERE").triggerHandler("click");
However, if you absolutely mustuse the ugly onclick, you can invoke it like this:
但是，如果您绝对必须使用丑陋的 onclick，您可以像这样调用它：
<a id="foo" href="#" onclick="alert('test');">Test</a>
var el = document.getElementById('foo');
el.onclick();
回答by Selvakumar Arumugam
You are using onclickattribute to bind the handler. Try like below,
您正在使用onclick属性来绑定处理程序。尝试如下，
document.getElementById(id).click();
回答by Kaizen Programmer
回答by thitemple
I would do something like this:
我会做这样的事情：
For the html
对于 html
<a href="#" class="dynamicFuncs" id="my001" data-funcName="myFunc">test</a>
And for the javascript
而对于 javascript
$(document).ready(function(){
$(".dynamicFuncs").on('click', function(){
var theFunc = $(this).attr('data-funcName');
window[theFunc]();
})
});
var myFunc = function() {
alert('me');
};
回答by Patrick W. McMahon
It's best to use addEventListener(). You can add all types of events. example: "click","mousemove" and many more. the false at the end is to stop the event from traversing up the DOM tree. By setting the 3rd property to true the event will continue to traverse the DOM tree so that parent elements will also receive the event. This also makes removing events just as simple as adding events using removeEventListener().
最好使用addEventListener()。您可以添加所有类型的事件。例如：“点击”、“鼠标移动”等等。最后的 false 是阻止事件向上遍历 DOM 树。通过将 3rd 属性设置为 true，事件将继续遍历 DOM 树，以便父元素也将接收该事件。这也使得删除事件就像使用removeEventListener()添加事件一样简单。
adding event
添加事件
element.addEventListener(event, function, useCapture)
removing event
移除事件
element.removeEventListener(event, function, useCapture)
event:Required. A String that specifies the name of the event.
事件：必需。指定事件名称的字符串。
function:Required. Specifies the function to run when the event occurs.
功能：必需。指定事件发生时要运行的函数。
useCaptureOptional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.
useCapture可选。一个布尔值，指定事件应该在捕获阶段还是在冒泡阶段执行。
Possible values:
可能的值：
true- The event handler is executed in the capturing phase
true- 事件处理程序在捕获阶段执行
false- Default. The event handler is executed in the bubbling phase
false- 默认。事件处理程序在冒泡阶段执行
This example requires no JavaScript libraries. This is just plain old JavaScript and will work in every browser with nothing extra needed.
此示例不需要 JavaScript 库。这只是普通的老式 JavaScript，无需额外操作即可在所有浏览器中运行。
<!DOCTYPE html>
<html>
<head>
<title>exampe</title>
</head>
<body>
<a id="test" href="">test</a>
<script>
document.getElementById("test").addEventListener("click", function(){
alert('hello world');
}, false);
</script>
</body>
</html>
You can read more about this with the following links:
您可以通过以下链接阅读更多相关信息：
- https://www.w3schools.com/jsref/met_element_addeventlistener.asp
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- https://www.geeksforgeeks.org/javascript-addeventlistener-with-examples/
- https://www.w3schools.com/jsref/met_element_removeeventlistener.asp
- https://www.w3schools.com/jsref/met_element_addeventlistener.asp
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- https://www.geeksforgeeks.org/javascript-addeventlistener-with-examples/
- https://www.w3schools.com/jsref/met_element_removeeventlistener.asp
If you would like to use JQuery methods to handle a click event you can do the following.
如果您想使用 JQuery 方法来处理点击事件，您可以执行以下操作。
Using .click()
使用 .click()
$("#target").click(function() {
alert("Handler for .click() called.");
});
More info here: https://api.jquery.com/click/
更多信息在这里：https: //api.jquery.com/click/
Using .on()
使用 .on()
$("#target").on("click", function() {
console.log($(this).text());
});
More info here: http://api.jquery.com/on/
更多信息在这里：http: //api.jquery.com/on/
