javascript - 以编程方式调用 onclick 属性

Question

我在一个页面上有一堆<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（）；返回假；”

score 10 · Accepted Answer

首先，ID 属性有一些限制，一个是它必须以字母开头。修复该问题后，我建议不要使用内联onclick处理程序。

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

然后您可以轻松触发它：

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

但是，如果您绝对必须使用丑陋的 onclick，您可以像这样调用它：

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

score 6 · Accepted Answer

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

document.getElementById(id).click();

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

score 0 · Accepted Answer

演示

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

score 0 · Accepted Answer

我会做这样的事情：

对于 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');
};

score -2 · Accepted Answer

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

添加事件

element.addEventListener(event, function, useCapture)

移除事件

element.removeEventListener(event, function, useCapture)

事件： 必填。一个字符串，它指定事件的名称。

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

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

可能的值：

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

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

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

javascript - 以编程方式调用 onclick 属性

5 回答 5

Related

Reference