ホームページ >毎日のプログラミング >HTMLの知識 >クリックイベントで複数のjs関数を呼び出す方法
クリックイベントで複数のjs関数を呼び出す方法
- 藏色散人オリジナル
- 2018-12-15 16:03:1012207ブラウズ
クリックイベントに対して複数の関数を呼び出す機能をjsで実現するには、addEventListener()メソッドを使用します。つまり、ボタンのクリック イベントで複数の関数を呼び出したり実行したりする場合は、JavaScript の addEventListener() メソッドを使用できます。
以下、具体的なコード例を組み合わせて、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 つの異なるカスタム関数を呼び出します。
その効果を次の図に示します。
注: addEventListener() メソッドは、指定されたイベント ハンドラーにイベント ハンドラーを追加するために使用されます。要素。
構文:
element.addEventListener(event, function, useCapture)
パラメータはそれぞれ次のことを表します:
event (必須) は文字列を表し、イベント名を指定します。
function (必須) は、イベントがトリガーされたときに実行される関数を示します。
イベント オブジェクトが最初のパラメーターとして関数に渡されるとき。イベント オブジェクトのタイプは、特定のイベントによって異なります。
Capture を使用します (オプション)。指定されたイベントがキャプチャフェーズまたはバブリングフェーズで実行されるかどうかを示すブール値。
この記事は、クリック イベントに対して複数の JS 関数を呼び出す実装方法について説明しています。これも、困っている友人の役に立てば幸いです。
以上がクリックイベントで複数のjs関数を呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。