Question

我有一个绑定到html中onclick事件的函数，如下所示：

<script>
    function f1(){ alert('hello world'); };
</script>

<a onclick="f1()">test</a>

我想对该功能做一些事情，比如将它绑定到另一个事件。我在jQuery中试过这个：

var defaultFunction = $('a').attr('onclick');

但defaultFunction被定义为字符串而不是函数本身。我可以用eval(defaultFunction)来评估它，但这让我觉得很脏。有没有办法可以访问函数本身，而不是字符串？

即。我希望能够调用defaultFunction()并执行绑定到a元素的默认onclick行为。（在这种情况下，请致电f1()）。

Here's a fiddle that tries to do that, but fails.

Answer 1

如果有帮助，请查看此document.getElementById("id_of_your_element").onclick，它会返回click处理程序，您可以调用它，但不能手动引发事件

Answer 2

这样的事情：

Example

var defaultFunction = $('a').attr('onclick');
var defaultFunctionName = defaultFunction.substring(0, defaultFunction.indexOf('('));

$('div').on('click', function(){

   if(typeof window[defaultFunctionName] ==="function")
   {
         window[defaultFunctionName]();
   }
    alert('Hello universe!');
});

Answer 3

使用此：

function f1() { 
    alert('hello world');
};
$('a').on('click', f1);

以下是修补程序的小提琴：http://jsfiddle.net/o8b5j15k/2/

Answer 4

您可以以编程方式触发click事件，而不是尝试复制内联绑定的函数：

function defaultFunction() {
    $("a[onclick]").click(); // change selector to match your actual element
}

http://jsfiddle.net/o8b5j15k/3/

Answer 5

最好使用 addEventListener（），您可以添加所有类型的事件。例如：＆＃34;点击＆＃34;，＆＃34; mousemove＆＃34;，＆＃34; mouseover＆＃34;，＆＃34; mouseout＆＃34;，＆＃34; resize＆＃34;还有很多。最后的错误是阻止事件穿过dom。如果您希望父dom对象也接收事件，只需将其更改为true即可。此示例也不需要javascript库。这只是普通的旧javascript，可以在每个浏览器中使用，无需额外的操作。

同样 addEventListener（）优于onClick（），因为您可以向dom元素添加无限数量的事件侦听器。如果你在一个元素上有一个onClick（），然后在同一个元素上设置另一个onClick（），你就覆盖了第一个onClick（）。使用addEventListener（），如果我想要点击一个元素时触发多个点击事件，我可以毫无问题地进行。

如果您想要有关触发事件的元素的数据，您可以将事件传递给该函数。您将在我的示例中看到函数（e）e是事件，您可以使用 e 或 this 来定位正在触发的元素。使用e或this我也可以获得有关触发事件的更多数据。例如，如果事件是鼠标移动或鼠标点击，我可以在事件发生时获得鼠标的x和y位置。

   <!DOCTYPE html>
    <html>
    <head>
    <title>exampe</title>
    </head>
    <body>
        <a id="test" href="">test</a>
    <script>
        document.getElementById("test").addEventListener("click",function(e){
            alert('hello world');
            alert('my element '+e);
            alert('my element '+this);
        },false);
    </script>
    </body>
    </html>

如果你想让addEventListener调用一个函数，只需将第二个值改为函数名，就像这样。

document.getElementById("test").addEventListener("click",f1,false);

这将执行函数

function f1(){ ... }

如果要删除事件侦听器，只需调用target。 removeEventListener （type，listener [，useCapture]）。非常简单易管理。

Answer 6

它只是onclick属性，不需要jQuery：

<script>
    function f1(){ alert('hello world'); };
</script>

<a onclick="f1()" id="aa">test</a>
<a id="bb">test2</a>

<script>
    bb.onclick = aa.onclick;
    // or
    bb.onclick = function (){ alert('hello bb'); };   
</script>

如何将函数绑定到onclick属性？

6 个答案: