blocks|key|571697|text|它只是onclick属性，不需要jQuery：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|571698|<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>|code-block|syntax|javascript|571699|entityMap^0|3|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

It's just <code>onclick</code> attribute, no jQuery required:

<pre><code>&lt;script&gt;
 function f1(){ alert('hello world'); };
&lt;/script&gt;

&lt;a onclick="f1()" id="aa"&gt;test&lt;/a&gt;
&lt;a id="bb"&gt;test2&lt;/a&gt;

&lt;script&gt;
 bb.onclick = aa.onclick;
 // or
 bb.onclick = function (){ alert('hello bb'); }; 
&lt;/script&gt;
</code></pre>

blocks|key|226681|text|如果这个document.getElementById("id_of_your_element").onclick对您有帮助，它将返回click处理程序，您可以调用它，但是手动引发事件是不对的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|226682|entityMap^0|4|1H|1V|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

see this <code>document.getElementById("id_of_your_element").onclick</code> if that help you, it will return <code>click</code> handler, and you can call that, but its not right to raise events manually

blocks|key|226753|text|就像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226754|示例|offset|length|226755|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!');
});|code-block|syntax|javascript|226756|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yLr7s2b1/7/^0|0|0|2|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Something like this:

<a href="http://jsfiddle.net/yLr7s2b1/7/" rel="nofollow">Example</a>

<pre><code>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!');
});
</code></pre>

blocks|key|570737|text|用这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570738|function+f1()+{+
++++alert('hello+world');
};
$('a').on('click',+f1);|code-block|syntax|javascript|570739|下面是您对修补程序的修改：http://jsfiddle.net/o8b5j15k/2/|offset|length|570740|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/o8b5j15k/2/^0|0|0|D|V|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Use this:

<pre><code>function f1() { 
 alert('hello world');
};
$('a').on('click', f1);
</code></pre>

Here is your fiddle with the fix: <a href="http://jsfiddle.net/o8b5j15k/2/" rel="nofollow">http://jsfiddle.net/o8b5j15k/2/</a>

blocks|key|226623|text|您可以通过编程方式触发click事件，而不是试图内联地复制函数绑定：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226624|function+defaultFunction()+{
++++$("a[onclick]").click();+//+change+selector+to+match+your+actual+element
}|code-block|syntax|javascript|226625|http://jsfiddle.net/o8b5j15k/3/|offset|length|226626|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

Instead of attempting to copy the function bound inline, you could trigger the click event programatically:

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

<a href="http://jsfiddle.net/o8b5j15k/3/" rel="nofollow">http://jsfiddle.net/o8b5j15k/3/</a>

blocks|key|226628|text|最好使用addEventListener()，您可以添加所有类型的事件。例如：“点击”、“摩丝表情”、“鼠标移动”、“鼠标输出”、“调整大小”等等。最后，假的是阻止事件遍历多玛。如果希望父dom对象也接收该事件，只需将其更改为true即可。另外，这个示例不需要javascript库。这只是普通的旧javascript，可以在每个浏览器中工作，不需要额外的任何东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|226629|另外，addEventListener()优于onClick()，因为您可以向dom元素添加无限数量的事件侦听器。如果在一个元素上有一个onClick()，然后在同一个元素上设置另一个onClick()，那么您已经覆盖了第一个onClick()。如果我希望在单击某个元素时触发多个单击事件，则可以使用addEventListener()进行操作，没有问题。|226630|如果您想要有关触发事件的元素的数据，可以将事件传递给函数。您将在我的示例函数(E)e中看到事件，您可以使用e或this来针对正在触发的元素。使用e或此，我还可以获得更多关于触发事件的数据。例如，如果事件是mousemove或mouseclick，我可以在事件发生时获得鼠标的x和y位置。|226631|+++<!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+'%2Be);
++++++++++++alert('my+element+'%2Bthis);
++++++++},false);
++++</script>
++++</body>
++++</html>|code-block|syntax|javascript|226632|如果您想让addEventListener调用一个函数，只需将第二个值更改为函数名，如下所示。|226633|document.getElementById("test").addEventListener("click",f1,false);|226634|这将执行该函数。|226635|function+f1(){+...+}|226636|当您想要删除事件侦听器时，只需调用target.removeEventListener(type，侦听器，useCapture)。非常简单，易于管理。|226637|entityMap^0|4|I|0|3|T|0|1H|1|1J|4|0|0|0|0|0|0|O|J|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Z|$]]

Its best to use addEventListener() you can add all types of events. example: "click", "mousemove", "mouseover", "mouseout", "resize" and many more. the false at the end is to stop the event from traversing up the dom. If you want parent dom objects to also receive the event just change it to true. also this example requires no javascript libraries. This is just plain old javascript and will work in every browser with nothing extra needed.

Also addEventListener() is better than onClick() as you can add an unlimited number of event listeners to a dom element. If you have an onClick() on an element and then set another onClick() on the same element you have overwritten the first onClick(). Using addEventListener() if i want multiple click events to trigger when i click on an element i can do it with no problem.

If you want data about the element that is triggering the event you can pass the event to the function. You will see in my example function(e) e is the event and you can use e or this to target the element that is being triggered. Using e or this i can also get more data about the triggered event. for example if the event was a mousemove or mouseclick i can get the x and y position of the mouse at the time of the event.

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

if you want to have addEventListener call a function just change the 2nd value to the function name like this. 

<pre><code>document.getElementById("test").addEventListener("click",f1,false);
</code></pre>

this will execute the function 

<pre><code>function f1(){ ... }
</code></pre>

When you want to remove an event listener just call target.removeEventListener(type, listener[, useCapture]). Very simple and easy to manage.

I've got a function bound to the <code>onclick</code> event in the html, like so:

<pre><code>&lt;script&gt;
 function f1(){ alert('hello world'); };
&lt;/script&gt;

&lt;a onclick="f1()"&gt;test&lt;/a&gt;
</code></pre>

I'd like to do something with that function, like bind it to another event. I tried this in jQuery:

<pre><code>var defaultFunction = $('a').attr('onclick');
</code></pre>

but <code>defaultFunction</code> is defined as a string rather than the function itself. I can evaluate it with <code>eval(defaultFunction)</code>, but that makes me feel dirty. Is there a way I can access the function itself, rather than the string?

i.e. I'd like to be able to call <code>defaultFunction()</code> and do whatever the default onclick behavior bound to the <code>a</code> element is. (In this case, call <code>f1()</code>).

<a href="http://jsfiddle.net/o8b5j15k/1/" rel="nofollow">Here's a fiddle that tries to do that, but fails.</a>

How can I get the function bound to an onclick attribute?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在html中有一个绑定到onclick事件的函数，如下所示：<script> function f1(){ alert('hello world'); };</script><a onclick="f1()">test</a>我想用这个函数做一些事情，比如将它绑定到另一个事件。我在jQuery上试过这个：var defaultFunction = $('a').attr('onclick'

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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