web-dev-qa-db-ja.com

HTMLまたはJavaScriptのボタンのonclickメソッドで2つのメソッドを呼び出す方法

HTMLまたはJavaScriptのボタンのonclickメソッドで2つのメソッドを呼び出す方法

javascripthtmlonclick
26
Nirav

  1. これを試して：

    <input type="button" onclick="function1();function2();" value="Call2Functions" />

  2. または、最初の関数の最後に2番目の関数を呼び出します。

       function func1(){
     //--- some logic
     func2();
   }

   function func2(){
    //--- some logic
   }

    ...ボタンのクリック時にfunc1（）を呼び出します：

    <input type="button" onclick="func1();" value="Call2Functions" />
46
Harry Joy

ハリー・ジョイが述べたように、onclick attrで次のようにできます：

<input type="button" onclick="func1();func2();" value="Call2Functions" />

または、JSで次のようにします。

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1();
    func2();
};

または、プログラムでonclickを割り当てており、以前のonclickが存在したかどうかが不明な場合（および上書きしたくない場合）：

var Call2FunctionsEle = document.getElementById( 'Call2Functions' ),
    func1 = Call2FunctionsEle.onclick;

Call2FunctionsEle.onclick = function()
{
    if( typeof func1 === 'function' )
    {
        func1();
    }
    func2();
};

クリックされた要素のスコープ内で関数を実行する必要がある場合は、適用の単純な使用を行うことができます。

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1.apply( this, arguments );
    func2.apply( this, arguments );
};
20
JAAulde

最新のイベント処理方法：

_element.addEventListener('click', startDragDrop, false);
element.addEventListener('click', spyOnUser, false);
_

最初の引数はイベント、2番目は関数、3番目はイベントバブリングを許可するかどうかを指定します。

QuirksMode から：

W3CのDOMレベル2イベント仕様では、従来のモデルの問題に注意を払っています。 1つの要素の同じイベントに対して、必要な数のイベントハンドラーを登録する簡単な方法を提供します。

W3Cイベント登録モデルの鍵は、メソッドaddEventListener()です。イベントタイプ、実行する関数、および後で説明するブール値（trueまたはfalse）の3つの引数を指定します。よく知られているdoSomething（）関数を、実行する要素のonclickに登録するには：

詳細はこちら： http://www.quirksmode.org/js/events_advanced.html

jQueryを使用する

jQueryを使用している場合、イベント処理用のNice APIがあります。

_$('#myElement').bind('click', function() { doStuff(); });
$('#myElement').bind('click', function() { doMoreStuff(); });
$('#myElement').bind('click', doEvenMoreStuff);
_

詳細はこちら： http://api.jquery.com/category/events/

10
Nathan Ridley
<input type="button" onclick="functionA();functionB();" />

function functionA()
{

}

function functionB()
{

}
2
Arrabi

こんにちは、

また、以下のようにすることもできます...

<input type="button" 
     onclick="var valFunc1 = func1(); var valFunc2 = func2(); if(valFunc1 == true && valFunc2 ==true) {return true;} else{return false;}" 
     value="Call2Functions" />

ありがとう、ヴィシャル・パテル

1
Vishal Patel