このレッスンでは、JavaScript でイベントを操作するすべての方法を見ていきます。

属性によるイベント

イベントを要素にバインドする最初の方法は、onclick などの属性を使用する方法であることはすでによくご存知でしょう (これを覚えていない場合、または見逃した場合は、「JavaScript イベントの操作の基礎」のレッスンを参照してください)。

例を使用して、この方法をもう一度思い出してください。ボタンをクリックすると、 func 関数が機能し、画面にアラートが表示されます。

属性を介してイベントを設定することには欠点があります。たとえば、ページ上のすべての入力に特定のイベントをアタッチしたい場合は、次の手順を実行する必要があります。 HTMLページ、すべての入力を検索し、それぞれにイベントを持つ属性を追加します。

これはあまり便利ではないので、手元のイベントをより高度な方法で操作できるようにしたいと考えています。

それでは、イベントを操作するときに JavaScript が他に何を提供できるかを見てみましょう。

属性の操作によるイベント 基本的に、 onclick 属性は、たとえば value と同じ属性です。そして、この方法で value 属性を変更できれば -

要素の値 , その後、同じ方法で onclick 属性を変更できます。これを行うと:

elem.onclick = 関数

次に、 func 関数を elem 要素にバインドします。 例を見て、以下でこのメソッドのすべてのニュアンスについて説明します。 var elem = document.getElementById("テスト"); elem.onclick = 関数; 関数 func() (alert("!"); )ここで、JavaScript の暗い秘密をお話ししなければなりません。関数が括弧なしで書かれている場合、たとえば、 機能、その後、彼女は自分のものを返します ソースコード、括弧付きの場合は、たとえば

関数()

、関数の結果を返します。

これを読んでも私が何を伝えたかったのかよく理解できないと思いますので、サンプルを実行して前の段落をもう一度読んでください。 , その後、同じ方法で onclick 属性を変更できます。以下に例を示します。 //関数は文字列「!」を返します。 function func() ( return "!"; )alert(func()); //「!」という行が表示されます。 アラート(機能); //関数 func のソース コードが表示されます。さあ、この恐ろしい秘密を知って、ラインに戻りましょう -Vこの場合

関数の結果ではなく、onclick 属性に関数のソース コードを記述します。これですべてが機能します。 これを行うと -戻るコマンドがないからです。

問題の関数のコードを思い出させてください。

関数 func() (alert("!"); ) setInterval メソッドをこのように使用したときのメソッド (JavaScript でのタイマーの操作に関するレッスンを参照) を思い出してください。 window.setInterval(タイマー, 1000)

- この場合、関数の結果ではなくコードに興味があるため、括弧なしでタイマー関数も書きました。

これらすべてのニュアンスについて詳しく説明しますが、完全に理解していなくても、今は私が話したこれらのことを覚えておいてください。

それは間に合うでしょう。

この方法の長所と短所

次に、この方法の長所と短所について説明します。

利点

利点は次のとおりです。現在、1 つのイベントをページ上のすべての入力に同時に割り当てたい場合、各入力にイベントを持つ属性を手動で割り当てる必要がありません。 すべての入力を取得してループし、それぞれにイベントを付加するだけです。< elems.length; i++) { elems[i].onclick = func; } function func() { alert("!"); }

これをやってみましょう。 getElementsByTagName を使用してすべての入力を取得し、ループ内の各入力にバインドしてみましょう。クリックされたときに各入力でアラート テキスト「!」が生成されるようにします。

/* このコードはページの読み込み時に実行されます。

HTML コードの後に​​記述する必要があることに注意してください。 */ var elems = document.getElementsByTagName("input"); for (var i = 0; i

任意の入力をクリックすると func 関数がトリガーされ、アラートとして「!」が表示されます。 これを使うとタスクを複雑にして、クリックされた入力の value 属性の内容がアラートに表示されるようにしてみましょう。 これを行うには、 this を使用する必要がありますが、以前と同じ方法ではありません。以前、イベントを属性に直接書き込んだときは、次のようにしました。

onclick="機能(これ)"

、でも今はこんな感じです elems[i].onclick = func(this)- それはできません。

まず、ここでの func 関数は括弧なしで記述する必要があるため、そうしないとソース コードではなく関数の結果になります。 第二に、これは、以下に応じて異なる要素を指します。コンテクスト

（書かれている場所にもよりますが） そしてこの場合、必要な要素 (つまり、クリックした要素) にはリンクしません。 elems[i].onclick = 関数?

実際、ここではこれは func 関数内で使用でき、この関数を引き起こしたイベントが発生した要素を参照します。 つまり、最初の入力をクリックするとその入力へのリンクが含まれ、2 番目の入力をクリックするとその入力へのリンクが含まれます。 基本的に、 onclick 属性は、たとえば value と同じ属性です。この場合、これを getElementById 経由で取得した elem 変数と考えてください。 例えば、 value 属性にアクセスできるようになります。つまり、この値

同じことをします。

< elems.length; i++) { elems[i].onclick = func; } function func() { alert(this.value); //изменение только здесь }

それでは、最後に問題を解決しましょう。クリックされた入力の value 属性の内容をアラートに表示させましょう。

属性内に直接記述された関数内でこれを使用しようとすると (つまり、イベントを設定する最初の方法です)、何も機能しないことに注意してください。 間違ったコードの例を参照してください。

function func() (alert(this.value); //期待される内容は表示されません)

この場合、実行コンテキストは、現在の要素ではなくウィンドウを参照するようなものです。 その理由については、匿名関数を理解するときに説明します。

正しいオプションは次のとおりであることを思い出させてください。

function func(elem) (alert(elem.value); //value 属性の内容を表示します)

欠陥

次に、デメリットについて説明します。

この方法の欠点は、1 つのイベントに 1 つの関数しかバインドできないことです。

最初に 1 つの関数を作成し、次に別の関数を作成しようとしても、成功しません。

次の例では、2 つの関数 func1 と func2 を onclick イベントにバインドしようとしています。 ただし、要素をクリックすると、最初の関数が上書きされるため、2 番目の関数のみが機能します。

var elem = document.getElementById("テスト"); elem.onclick = 関数 1; //ここで最初に func1 elem.onclick = func2 をバインドします。 //そして func2 と func1 はバインドされなくなりました function func1() (alert("1"); ) function func2() (alert("2"); )

ただし、別の欠点があります。たとえば、func2 をバインドしたままにして、onclick から func1 関数のみを簡単にアンバインドすることはできません。 もちろん、大規模なコード構造を作成することもできますが、イベントをバインドするさらに高度な方法 (addEventListener を使用) を使用する場合は、これは必要ありません。 この関数の使い方を見てみましょう。

addEventListener の操作

addEventListener メソッドは、イベントの名前を最初のパラメーターとして受け取り、このイベントにバインドする必要がある関数を 2 番目のパラメーターとして受け取ります。

この場合、イベント名は「onclick」の代わりに「click」、「onmouseover」の代わりに「mouseover」など、「on」を付けずに記述されます。 関数名 (2 番目のパラメーター) は引用符も括弧も使用せずに記述されます (これが必要な理由については、すでに上で説明しました)。

ボタンがクリックされたときに func 関数が呼び出されることを確認してみましょう。

var elem = document.getElementById("テスト"); elem.addEventListener("クリック", func); 関数 func() (alert("!"); ) 次に、2 つのイベントを同時にバインドしてみましょう。 この場合、前のケースのような問題は発生しません。イベントは上書きされません。お互い

どれだけ発表されても:

var elem = document.getElementById("テスト"); elem.addEventListener("クリック", func1); elem.addEventListener("クリック", func2); 関数 func1() (アラート("1"); ) 関数 func2() (アラート("2"); )

このコードをコピーして自分で実行すると、func1 関数と func2 関数の両方が機能します。

addEventListener でこれを使用する

2 番目の方法 (要素プロパティを通じて) でイベントをバインドする場合のこれの操作についてはすでに説明しました。

addEventListener の場合、これは同様の方法で機能し、イベントが発生した要素を参照します。

例を見てみましょう。onclick イベントをボタンにバインドすると、func 関数が起動されます。 この関数はボタンの値を表示します。

var elem = document.getElementById("テスト"); elem.addEventListener("クリック", func); 関数 func() (alert(this.value); )

これを使用すると、要素ごとに異なる関数を作成する必要がなくなるので便利です。 同じことを行う関数 func が 1 つありますが、異なる要素に対して行われ、これによってそれらを区別します (どの要素がクリックされたか)。その要素は this に含まれます。

さて、ここで getElementsByTagName を使用してボタンの配列を取得し、それぞれに func 関数を割り当てます。

var elems = document.getElementsByTagName("input"); for (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", func); } function func() { alert(this.value); }

RemoveEventListener によるバインディングの削除

次に、イベントに関連付けられた関数を削除するという事実に対処します。

得られる結果: たとえば、関数 func1 と func2 が onclick イベントにバインドされている場合、func2 に影響を与えることなく func1 関数のバインドを解除でき、またその逆も可能です。

要素に 3 つの関数 func1、func2、func3 をバインドしてみましょう。これにより、画面上に数字 1、2、3 が表示されます。

var elem = document.getElementById("テスト"); elem.addEventListener("クリック", func1); elem.addEventListener("クリック", func2); elem.addEventListener("クリック", func3); 関数 func1() (アラート("1"); ) 関数 func2() (アラート("2"); ) 関数 func3() (アラート("3"); )

ここで、バインドの直後に、関数 func1 と func2 のバインドを解除します。 これは、removeEventListener メソッドを使用して行われます。このメソッドは、addEventListener と同じパラメータを受け取ります。

var elem = document.getElementById("テスト"); elem.addEventListener("クリック", func1); elem.addEventListener("クリック", func2); elem.addEventListener("クリック", func3); elem.removeEventListener("クリック", func1); elem.removeEventListener("クリック", func2); 関数 func1() (アラート("1"); ) 関数 func2() (アラート("2"); ) 関数 func3() (アラート("3"); )

この例を実行すると、func3 は機能しますが、最初の 2 つは機能しないことがわかります。

onclick() の機能を理解したいと思っている皆さん、こんにちは。 今日の記事は、このイベント ハンドラーの動作原理を完全に理解し、onclick JavaScript の特定の例、つまり例を分析するのに役立ちます。

このツールを使用するいくつかの方法を示し、それらの長所と短所を説明し、jQuery がイベントでどのように動作するかについても説明します。 それでは、マテリアルの分析に移りましょう。

イベントハンドラの割り当て

記述規則に従って、すべてのハンドラーの名前には「on+イベント名」が含まれており、これは onclick() で確認されます。 選択したイベントに応じて、異なるアクションによる処理が発生します。 この例では、onclick() を使用すると、マウスの左クリックによって発生したイベントのみが実行されます。

イベント ハンドラーを割り当てるさまざまな方法

現在、特定のイベントまたはイベントのハンドラーをコードに導入するためのオプションがいくつかあります。

単純なイベントの使用

単純なオプションから始めましょう。これは、onclick() を HTML ドキュメント自体のマークアップに実装することです。 次のようになります。

ご覧のとおり、マウスの左ボタンでボタンをクリックすると、「クリッククリック!」というメッセージが表示されます。 小さいながらも重要な点に注目していただきたいと思います。 アラート内では一重引用符 ('') のみを使用できます。

この場合にも使用できます キーワードこれ。 これは現在の要素を参照し、その要素で使用できるすべてのメソッドを提供します。

私をクリックしてください

このコード行は、「Click on me」というテキストを含むボタンを作成します。 押すと、画面に「「Press!」ボタンの名前が置き換えられます。」というメッセージが表示されます。

この方法は間違いなく非常に簡単です。 ただし、これは同様のタスクにのみ適しています。 メッセージを表示したり、簡単なコマンドを実行したりできます。

循環構造の使用、タグの使用などが必要な場合は、 この方法合わない。 コードの可読性が低下するだけでなく、コードが大きくなり、雑になります。

この場合、関数を使用する必要があります。

関数の操作

機能により分離が可能 必要なコード別のブロックに分割され、後で のイベント ハンドラーを通じて呼び出すことができます。

例として、1 位から 5 位までのさまざまな累乗で得られた数値をユーザーに表示するアプリケーションを添付しました。 これを行うために、パラメータを渡すことができる関数 countPow() を作成しました。 私のアプリケーションでは、ユーザーは関数変数として数値を入力する必要があります。

したがって、上記の名前の関数に関連付けられたハンドラーを通じて計算が実行され、画面に表示されます。

var 結果 =1;