クリックイベントで複数のjs関数を呼び出す方法-HTMLの知識-php.cn

クリックイベントで複数のjs関数を呼び出す方法

藏色散人

リリース： 2018-12-19 09:47:56

オリジナル

12162 人が閲覧しました

クリックイベントに対して複数の関数を呼び出す機能をjsで実現するには、addEventListener()メソッドを使用します。つまり、ボタンのクリックイベントで複数の関数を呼び出したり実行したりする場合は、JavaScript の addEventListener() メソッドを使用できます。

クリックイベントで複数のjs関数を呼び出す方法

以下、具体的なコード例を組み合わせて、js のクリックイベントで複数の関数 を呼び出す実装方法を紹介します。

コード例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>click事件中调用多个js函数的方法示例</title>
</head>
<body>
<button type="button" id="myBtn">点我</button>
<script>
 // 定义自定义函数
 function sayHello(){
        alert("Hello World! sayHello() 函数执行成功!");
 }

    function sayHi(){
        alert("Hi There! sayHi() 函数执行成功!");
 }

    // 选择按钮元素
 var btn = document.getElementById("myBtn");

 // 将事件侦听器分配给按钮
 btn.addEventListener("click", sayHello);
 btn.addEventListener("click", sayHi);
</script>
</body>
</html>

ログイン後にコピー

上記のコードでは、sayHello() と SayHi() の 2 つの関数がカスタマイズされています。次に、getElementById メソッドを使用してボタン要素を取得します。次に、addEventListener メソッドを使用して同じイベント (click クリックイベント) をボタンボタンに割り当て、2 つの異なるカスタム関数を呼び出します。

その効果を次の図に示します。

クリックイベントで複数のjs関数を呼び出す方法

注: addEventListener() メソッドは、指定されたイベントハンドラーにイベントハンドラーを追加するために使用されます。要素。

構文:

element.addEventListener(event, function, useCapture)

ログイン後にコピー

パラメータはそれぞれ次のことを表します:

event (必須) は文字列を表し、イベント名を指定します。

function (必須) は、イベントがトリガーされたときに実行される関数を示します。

イベントオブジェクトが最初のパラメーターとして関数に渡されるとき。イベントオブジェクトのタイプは、特定のイベントによって異なります。

Capture を使用します (オプション)。指定されたイベントがキャプチャフェーズまたはバブリングフェーズで実行されるかどうかを示すブール値。

この記事は、クリックイベントに対して複数の JS 関数を呼び出す実装方法について説明しています。これも、困っている友人の役に立てば幸いです。

以上がクリックイベントで複数のjs関数を呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。