blocks|key|905731|text|onclick="doSomething();doSomethingElse();"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|905732|但实际上，您最好完全不使用onclick，并通过Javascript代码将事件处理程序附加到DOM节点。这就是所谓的unobtrusive+javascript。|unstyled|offset|length|style|CODE|905733|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Unobtrusive_JavaScript^0|0|D|7|1M|M|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@$G|U|H|V|I|J]]|9|@$G|W|H|X|1|Y]]|A|$]]|$1|K|3|-4|5|F|7|Z|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>onclick="doSomething();doSomethingElse();"
</code></pre>

<p>But really, you're better off not using <code>onclick</code> at all and attaching the event handler to the DOM node through your Javascript code.  This is known as <a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="noreferrer">unobtrusive javascript</a>.     </p>


blocks|key|1120636|text|如果您只使用JavaScript而不使用jQuery，则需要使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1120637|var+el+=+document.getElementById("id");
el.addEventListener("click",+function(){alert("click1+triggered")},+false);
el.addEventListener("click",+function(){alert("click2+triggered")},+false);|code-block|syntax|javascript|1120638|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is the code required if you're using only JavaScript and not jQuery</p>

<pre><code>var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
</code></pre>


blocks|key|1120434|text|当然，只需将多个侦听器绑定到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1120435|Short+cutting+with+jQuery|offset|length|style|CODE|1120436|​|1120437|$("#id").bind("click",+function()+{
++alert("Event+1");
});
$(".foo").bind("click",+function()+{
++alert("Foo+class");
});|code-block|syntax|javascript|1120438|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+class="foo"+id="id">Click</div>|1120439|1120440|entityMap^0|0|0|P|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>Sure, simply bind multiple listeners to it.</p>

<p><code>Short cutting with jQuery</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#id").bind("click", function() {
  alert("Event 1");
});
$(".foo").bind("click", function() {
  alert("Foo class");
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="foo" id="id"&gt;Click&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|905813|text|我将使用element.addEventListener方法将其链接到一个函数。通过该函数，您可以调用多个函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|905814|我认为将事件绑定到单个函数，然后调用多个函数的好处是，您可以执行一些错误检查，使用一些if+else语句，以便只有在满足特定条件时才会调用某些函数。|905815|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/element.addEventListener^0|4|O|4|O|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>I would use the <a href="https://developer.mozilla.org/en/DOM/element.addEventListener" rel="noreferrer"><code>element.addEventListener</code></a> method to link it to a function. From that function you can call multiple functions.</p>

<p>The advantage I see in binding an event to a single function and then calling multiple functions is that you can perform some error checking, have some if else statements so that some functions only get called if certain criteria are met.</p>


blocks|key|906129|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|906130|var+btn+=+document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function+method2(){
++console.log("Method+2");
}
function+method1(){
++console.log("Method+1");
}|code-block|syntax|javascript|906131|<!DOCTYPE+html>
<html>
<head>
++<meta+charset="utf-8">
++<meta+name="viewport"+content="width=device-width">
++<title>Pramod+Kharade-Javascript</title>
</head>
<body>
<button+id="twofuns">Click+Me!</button>
</body>
</html>|906132|906133|您可以使用一个或多个方法来实现/调用一个事件。|906134|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
  console.log("Method 2");
}
function method1(){
  console.log("Method 1");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;Pramod Kharade-Javascript&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button id="twofuns"&gt;Click Me!&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>You can achieve/call one event with one or more methods.</p>


blocks|key|1120974|text|+const+callDouble+=+()+=>{
++++increaseHandler();
++++addToBasket();
}++++++++++++++++
<button+onClick={callDouble}+>+Click+</button>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1120975|这对我来说很有效，你可以在一个函数中调用多个函数。然后调用这个函数。|unstyled|1120976|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> const callDouble = () =&gt;{
    increaseHandler();
    addToBasket();
}                
&lt;button onClick={callDouble} &gt; Click &lt;/button&gt;
</code></pre>
<p>It's worked for me, you can call multiple functions in a single function. then call that single function.</p>


blocks|key|1120817|text|你只能通过代码添加多个，即使你在html中有第二个onclick属性，它被忽略了，并且click2+triggered永远不会被打印出来，你可以在mousedown上添加一个动作，但这只是一个变通办法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1120818|因此，最好的做法是通过代码添加它们，如下所示：|1120819|​|1120820|var+element+=+document.getElementById("multiple_onclicks");
element.addEventListener("click",+function(){console.log("click3+triggered")},+false);
element.addEventListener("click",+function(){console.log("click4+triggered")},+false);|code-block|syntax|javascript|1120821|<button+id="multiple_onclicks"+onclick='console.log("click1+triggered");'+onclick='console.log("click2+triggered");'+onmousedown='console.log("click+mousedown+triggered");'++>+Click+me</button>|1120822|1120823|你需要小心，因为事件可能会堆积起来，如果你想添加许多事件，你可能会忘记它们运行的顺序。|1120824|entityMap^0|P|7|17|G|21|9|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|17|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|U|$]]

<p>You can add multiple only by code even if you have the second <code>onclick</code> atribute in the html it gets ignored, and <code>click2 triggered</code> never gets printed, you could add one on action the <code>mousedown</code> but that is just an workaround.   </p>

<p>So the best to do is add them by code as in:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");'  &gt; Click me&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>You need to take care as the events can pile up, and if you would add many events you can loose count of the order they are ran.</p>


blocks|key|906092|text|对于可维护的JavaScript，另一个补充是使用命名函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|906093|以下是匿名函数的示例：|906094|var+el+=+document.getElementById('id');

//+example+using+an+anonymous+function+(not+recommended):
el.addEventListener('click',+function()+{+alert('hello+world');+});
el.addEventListener('click',+function()+{+alert('another+event')+});|code-block|syntax|javascript|906095|但是假设你有几个元素附加到同一个元素上，并且想要删除其中的一个。无法从事件侦听器中删除单个匿名函数。|906096|相反，您可以使用命名函数：|906097|var+el+=+document.getElementById('id');

//+create+named+functions:
function+alertFirst()+{+alert('hello+world');+};
function+alertSecond()+{+alert('hello+world');+};

//+assign+functions+to+the+event+listeners+(recommended):
el.addEventListener('click',+alertFirst);
el.addEventListener('click',+alertSecond);

//+then+you+could+remove+either+one+of+the+functions+using:
el.removeEventListener('click',+alertFirst);|906098|这也让你的代码更容易阅读和维护。尤其是当你的函数更大的时候。|906099|entityMap^0|0|0|0|0|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|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>One addition, for maintainable JavaScript is using a named function.</p>

<p>This is the example of the anonymous function:</p>

<pre><code>var el = document.getElementById('id');

// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });
</code></pre>

<p>But imagine you have a couple of them attached to that same element and want to remove one of them. It is not possible to remove a single anonymous function from that event listener. </p>

<p>Instead, you can use named functions:</p>

<pre><code>var el = document.getElementById('id');

// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };

// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);

// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);
</code></pre>

<p>This also keeps your code a lot easier to read and maintain. Especially if your function is larger. </p>


blocks|key|1120712|text|您可以将所有函数组合成一个函数并调用them.Libraries，就像Ramdajs有一个将多个函数组合成一个函数的函数一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1120713|<a+href="#"+onclick="R.compose(fn1,fn2,fn3)()">Click+me+To+fire+some+functions</a>|code-block|syntax|javascript|1120714|或者，您可以将组合作为单独的函数放在js文件中并调用它。|1120715|const+newFunction+=+R.compose(fn1,fn2,fn3);


<a+href="#"+onclick="newFunction()">Click+me+To+fire+some+functions</a>|1120716|entityMap|0|LINK|mutability|MUTABLE|url|http://ramdajs.com/docs/#compose^0|Z|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>You can compose all the functions into one and call them.Libraries like <a href="http://ramdajs.com/docs/#compose" rel="nofollow noreferrer">Ramdajs</a> has a function to compose multiple functions into one.</p>

<pre><code>&lt;a href="#" onclick="R.compose(fn1,fn2,fn3)()"&gt;Click me To fire some functions&lt;/a&gt;
</code></pre>

<p>or you can put the composition as a seperate function in js file and call it </p>

<pre><code>const newFunction = R.compose(fn1,fn2,fn3);


&lt;a href="#" onclick="newFunction()"&gt;Click me To fire some functions&lt;/a&gt;
</code></pre>


blocks|key|1120948|text|这是brad+anser的替代方法-您可以使用逗号，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1120949|onclick="funA(),+funB(),+..."|code-block|syntax|javascript|1120950|然而，最好不要使用这种方法-对于小型项目，您只能在调用一个函数时使用onclick+(更多：updated+unobtrusive+javascript)。|1120951|​|1120952|function+funA()+{
++console.log('A');
}

function+funB(clickedElement)+{
++console.log('B:+'+%2B+clickedElement.innerText);
}

function+funC(cilckEvent)+{
++console.log('C:+'+%2B++cilckEvent.timeStamp);
}|1120953|div+{cursor:pointer}|1120954|<div+onclick="funA(),+funB(this),+funC(event)">Click+me</div>|1120955|1120956|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/3910750/860099|1|https://stackoverflow.com/a/54769527/860099^0|2|A|0|0|0|1A|U|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|1D|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|F|7|1E|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|S|3|L|5|6|7|1G|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]|11|$5|W|X|Y|C|$Z|12]]]]

<p>This is alternative of <a href="https://stackoverflow.com/a/3910750/860099">brad anser</a> - you can use comma as follows</p>

<pre><code>onclick="funA(), funB(), ..."
</code></pre>

<p>however is better to NOT use this approach - for small projects you can use onclick only in case of one function calling (more: <a href="https://stackoverflow.com/a/54769527/860099">updated unobtrusive javascript</a>).</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function funA() {
  console.log('A');
}

function funB(clickedElement) {
  console.log('B: ' + clickedElement.innerText);
}

function funC(cilckEvent) {
  console.log('C: ' +  cilckEvent.timeStamp);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {cursor:pointer}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div onclick="funA(), funB(this), funC(event)"&gt;Click me&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>Is there any way to use the <code>onclick</code> html attribute to call more than one JavaScript function?</p>


How to call multiple JavaScript functions in onclick event?

有没有办法使用onclick html属性调用多个JavaScript函数？

问如何在onclick事件中调用多个JavaScript函数？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在onclick事件中调用多个JavaScript函数？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在onclick事件中调用多个JavaScript函数？
EN