logo

TechCodeview

JavaSCRIPT トリガー クリック

私たちは基本的に、JavaScript でプログラミングしているときに、ボタンをクリックするだけで任意の関数を作成できる、ある種の状況に直面します。たとえば、Web ページやサイトの自動テストの際には、さらにいくつかの機能を検討する必要があります。このような場合、JavaScript のクリック イベントをトリガーする手法は、前述の課題に対抗するためにより信頼性が高く、効率的になります。

夕食と夕食の時間

これに関連して、JavaScript のトリガー クリック イベント プロシージャについて学習します。

JavaScript でクリック イベントをトリガーする方法:

JavaScript でクリック イベントをトリガーするには、以下のテクニックを適用する必要があります。

a) click() メソッド

b) addEventListener() メソッドと dispathEvent メソッド

ここで、上で書いたメソッドを使用して、次のように説明します。

方法 1:

JavaScript のクリック イベント メソッドを使用してクリック イベントをトリガーします。

言及された要素については、 クリック方法 アクションを実行するために使用されます。必要なボタンがユーザーによってクリックされたときに、ボタンの作成、その ID の取得、クリック イベントのトリガーを利用してユーザー定義関数を使用すると、このメソッドを実装できます。

さらに明確にするために、以下の例を見てみる必要があります。

配列Javaに追加

例：

以下の例では、 'ここをクリック' 、ボタンは、そのボタンのクリック イベントにアクセスするための ID とクリック イベントとともに作成されます。

 Click here

JavaScriptでIDを指定することで、document.getElementByIdメソッドで作成したボタンにアクセスする必要があります。次の操作を実行するには、クリック イベントが呼び出されます。

 const get= document.getElementById('btn'); get.click();

最後に、ボタンがクリックされたときに、次の関数を出力するように定義します。 'クリックイベント()' コンソール上でクリック方式を使用する方法です。

 function clickEvent() { console.log('now the Click Event is triggered ') }

上記のそれぞれのコードの出力から、click メソッドを自動化された方法で使用して、ボタン click here がクリックされたことが分かりました。

方法 2:

addEventListener() メソッドとdispatchEvent() メソッドを使用して、JavaScript でクリック イベントをトリガーします。

JavaScript では、JavaScript イベント ターゲット インターフェイスによって提供される統合メソッドです。

イベントリスナーはこのメソッドで登録されます。前述のイベントがターゲットでキャッチされたときに、設定された関数を呼び出します。

イベントの構文:

 target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);

構文の説明:

  • 上記の構文には、というパラメータがあります。 $type 、これは必須パラメータです。監視するイベントのタイプを示すパラメータは、文字列を 1 つだけ受け入れます。このパラメータは大文字と小文字が区別されます。キーボード、クリック、データベース、入力などのさまざまなイベントがサポートされています。
  • 同様に、 $listener も必須パラメータです。前述のタイプのイベントが発生したときに、イベントに関する通知がこのパラメーターによってオブジェクトとして受信されます。 JavaScript 関数または Eventlistner インターフェイス上で、このオブジェクトを実装する必要があります。
  • 一方、 $オプション です オプションのパラメータ 初期化。

例: 1 

 Open bing const link = document.getElementById(&apos;btn&apos;); link.addEventListener(&apos;click&apos;, e =&gt; {}); for(let i = 0; i <5; i++) { link.dispatchevent(new event('click')); } function opengooglebymethod() console.log('the required event is triggered') < pre> <p> <strong>Output:</strong> </p> <pre> &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. </pre> <p> <strong>Example 2:</strong> </p> <p>In this example, first of all, we will include a button with a corresponding id with an onclick event along with a value as same as like previous one.</p> <pre> Click here </pre> <p>After that, with the help of the <strong> <em>addEventListener()</em> </strong> method, we will retrieve the button and click the event in it to specify the <strong> <em>&apos;e&apos;</em> </strong> in its argument, which refers to the event click object.</p> <pre> const get = document.getElementById(&apos;btn&apos;); get.addEventListener(&apos;click&apos;, e =&gt; {}); get.dispatchEvent(new Event(&apos;click&apos;)); </pre> <p>Finally, as same as the previous method, we will define the click event to display the corresponding message in it at the time the click event is triggered.</p> <pre> function clickEvent() { console.log(&apos;The required event is triggered &apos;) } </pre> <hr></5;>

例 2:

Javaの命名規則

この例では、まず、onclick イベントに対応する ID を持つボタンと、前の例と同じ値を含めます。

 Click here

その後、皆様のご協力を得て、 addEventListener() メソッドでは、ボタンを取得し、その中のイベントをクリックして、 「そうですよ」 引数でイベントクリックオブジェクトを参照します。

 const get = document.getElementById(&apos;btn&apos;); get.addEventListener(&apos;click&apos;, e =&gt; {}); get.dispatchEvent(new Event(&apos;click&apos;));

最後に、前の方法と同様に、クリック イベントがトリガーされたときに対応するメッセージを表示するクリック イベントを定義します。

 function clickEvent() { console.log(&apos;The required event is triggered &apos;) }