以编程方式调用onclick属性

call onclick attribute programmatically

本文关键字：onclick 属性 调用 方式 编程      更新时间：2023-09-26

我在一个页面上有一堆<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可能不仅仅是一个函数名。"fnagg ();返回错误;"

首先，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();

您正在使用onclick属性绑定处理程序。试试下面的

document.getElementById(id).click();
演示:

http://jsfiddle.net/kpvKG/

DEMO

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

我会这样做:

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

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

element.addEventListener(event, function, useCapture)
<<p> 删除事件/strong> 
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>

您可以通过以下链接阅读更多信息:

  • 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

如果你想使用JQuery方法来处理点击事件，你可以这样做:

使用.click () 

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

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

使用内()

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

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

相关文章：