以编程方式调用 onclick 属性答案

【问题标题】：call onclick attribute programmatically以编程方式调用 onclick 属性
【发布时间】：2013-03-01 20:02:34
【问题描述】：

我在一个页面上有一堆<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>
  ...

现在我将 id 作为查询字符串传递给页面，所以我最初想做类似的事情

$('a[id="' + id + '"]').click();
$('a[id="' + id + '"]').trigger("click");

事实证明这两个都是不允许的，所以如果我有 id ，我怎么能调用写在 onclick 属性中的函数呢？我知道我大概可以这样得到它

var funcToCall = $('a[id="' + id + '"]').attr('onclick');

但是我如何调用这个 funcToCall？记住 funcToCall 可能不仅仅是一个函数名 ex。 "fnagg(); 返回 false;"

【问题讨论】：

不，我不知道任何给定的标记上的 onclick 属性是什么，我只能通过 id 找到，并且想要特定 onclick 中的功能跨度>
如果您使用 jQuery 函数绑定事件处理程序，您可以这样做 $('a[id="' + id + '"]').click(); $('a[id="' + id + '"]').trigger("click");。阅读更多关于差异stackoverflow.com/questions/12627443/jquery-click-vs-onclick/…
你可以这样试试 setTimeout(funcToCall+"()",0);
这似乎是一个糟糕的设计决策。这些链接中的每一个在做什么？比如fnaaa()是做什么的？
我发布了一个很好的例子，请在此页面上查看stackoverflow.com/questions/25532182/…

标签： javascript jquery html

【解决方案1】：

首先，ID 属性有some restrictions，一个是它必须以字母开头。在你解决这个问题后，我建议不要使用内联的onclick 处理程序。

$("#ID_HERE").click(function(e) {
  fnaaa();
  e.preventDefault();
});

那么你就可以轻松触发了：

$("#ID_HERE").triggerHandler("click");

但是，如果你绝对必须使用丑陋的 onclick，你可以调用它like this:

<a id="foo" href="#" onclick="alert('test');">Test</a>
var el = document.getElementById('foo');
el.onclick();

【讨论】：

谢谢，这些不是我的真实身份，我只是想简化一个例子。所以人们可以看到我正在尝试做的事情 - 在只知道 id 的情况下动态调用内联 onclick 属性
如果您仍想使用 jQuery 来选择元素（例如，如果您想根据 id 以外的其他内容进行选择），您可以使用 $(selector)[0].onclick(); 触发 onclick 处理程序/跨度>
Im getting Object [object Object] 没有使用 jquery 版本 $(selector)[0].onclick() 的方法 'onclick'；
如果你使用 addEventListener() 你不会得到任何错误。 onclick() 是元素的属性，因此您只能分配一次单击操作。在 addEventListener() 中，您可以为所需的任何元素分配尽可能多的侦听器。

【解决方案2】：

您正在使用onclick 属性绑定处理程序。尝试如下，

document.getElementById(id).click();

演示： http://jsfiddle.net/kpvKG/

【讨论】：

@ScottSelby 什么？我想，你在那个演示中有一个错字。检查属性id.. 在该演示中，您将其作为d 而不是id。

【解决方案3】：

DEMO

function fnagg()
{
    alert('fired');
}
$(function(){
    eval("var funcToCall=function(){"+$('#004').attr("onclick")+"}");
funcToCall();
});

【讨论】：

@Vega，你是对的，但这是我所知道的将字符串包装在问题所要求的函数中的唯一方法。这并不总是邪恶的......这里的最高投票答案：stackoverflow.com/questions/86513/…

【解决方案4】：

我会这样做：

对于html

<a href="#" class="dynamicFuncs" id="my001" data-funcName="myFunc">test</a>

对于 javascript

$(document).ready(function(){
    $(".dynamicFuncs").on('click', function(){
        var theFunc = $(this).attr('data-funcName');
        window[theFunc]();
    })
});

var myFunc = function() {
    alert('me');
};

【讨论】：

【解决方案5】：

最好使用 addEventListener()。您可以添加所有类型的事件。例如：“点击”、“鼠标移动”等等。最后的 false 是阻止事件向上遍历 DOM 树。通过将第三个属性设置为 true，事件将继续遍历 DOM 树，这样父元素也将接收到该事件。这也使得删除事件就像使用 removeEventListener() 添加事件一样简单。

添加事件

element.addEventListener(event, function, useCapture)

移除事件

element.removeEventListener(event, function, useCapture)

事件：必填。指定事件名称的字符串。

功能：必需。指定事件发生时要运行的函数。

useCapture 可选。一个布尔值，指定事件是在捕获阶段还是在冒泡阶段执行。

可能的值：

true - 事件处理程序在捕获阶段执行

false- 默认值。事件处理程序在冒泡阶段执行

此示例不需要 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>

您可以通过以下链接了解更多信息：

如果您想使用 JQuery 方法来处理点击事件，您可以执行以下操作。

使用 .click()

$("#target").click(function() {
  alert("Handler for .click() called.");
});

更多信息在这里：https://api.jquery.com/click/

使用 .on()

$("#target").on("click", function() {
  console.log($(this).text());
});

更多信息在这里：http://api.jquery.com/on/

【讨论】：