JavaScript を Web ページから移動する

これは 違う JavaScript を使用していないユーザーがリンクをクリックしたときにどこかに転送されるように、href 属性に実際の意味のあるアドレスがない限り、onclick を使用する方法。また、多くの人がこのコードから「return false」を除外し、スクリプトの実行後に現在のページの上部が常に読み込まれるのはなぜなのか疑問に思っています (これは、href='#' がページに実行するように指示していることです)。すべてのイベント ハンドラーから false が返されます. もちろん、リンク先として意味のあるものがある場合は、onclick コードを実行した後にそこに移動したい場合があります。

多くの人が気付いていないのは、onclick イベント ハンドラを どれか 訪問者がそのコンテンツをクリックしたときに対話するための Web ページの HTML タグ。したがって、人々が画像をクリックしたときに何かを実行したい場合は、次を使用できます。

人々がテキストをクリックしたときに何かを実行したい場合は、次を使用できます。

もちろん、これらは、訪問者がリンクのようにクリックした場合に応答があるという自動的な視覚的手がかりを提供しませんが、画像またはスパンを適切にスタイリングすることで、その視覚的手がかりを自分で簡単に追加できます.

onclick イベント ハンドラーをアタッチするこれらの方法について注意すべきもう 1 つの点は、無効にする必要がある要素がクリックされたときに発生する既定のアクションがないため、「return false」を必要としないことです。

onclick をアタッチするこれらの方法は、多くの人が使用する貧弱な方法を大幅に改善しますが、それをコーディングする最良の方法にはまだほど遠いです。上記の方法のいずれかを使用して onclick を追加する際の問題の 1 つは、まだ JavaScript を HTML に混ぜていることです。 オンクリック は いいえ HTML 属性であり、JavaScript イベント ハンドラーです。そのため、JavaScript を HTML から分離してページの保守を容易にするために、onclick 参照を HTML ファイルから取得して、それが属する別の JavaScript ファイルにする必要があります。

これを行う最も簡単な方法は、HTML の onclick を ID これにより、イベント ハンドラーを HTML の適切な場所に簡単に追加できます。したがって、HTML には次のいずれかのステートメントが含まれている可能性があります。

次に、ページの本文の下部にリンクされているか、ページの先頭にあり、コードがページの読み込みが完了した後に呼び出される関数内にある別の JavaScript ファイルに JavaScript をコーディングできます。 .イベント ハンドラーをアタッチする JavaScript は次のようになります。

注意すべきことが1つあります。 onclick は常にすべて小文字で書かれていることに気付くでしょう。 HTML でステートメントをコーディングする場合、onClick と記述する人もいます。 JavaScript イベント ハンドラーの名前はすべて小文字であり、onClick などのハンドラーがないため、これは誤りです。 HTML では大文字と小文字が区別されず、ブラウザーが正しい名前にマップするため、HTML タグ内に JavaScript を直接含めると、問題を回避できます。 JavaScript では大文字と小文字が区別され、JavaScript には onClick のようなものがないため、JavaScript 自体で間違った大文字を使用することはできません。

このコードは、HTML 内の正しい要素にイベントをアタッチし、JavaScript を HTML から完全に分離しているため、以前のバージョンよりも大幅に改善されています。ただし、これをさらに改善することができます。

残っている 1 つの問題は、特定の要素に 1 つの onclick イベント ハンドラーしかアタッチできないことです。同じ要素に別の onclick イベント ハンドラーをアタッチする必要がある場合は、以前にアタッチされていた処理がその要素にアタッチされなくなります。さまざまな目的でさまざまなスクリプトを Web ページに追加する場合、同じ要素がクリックされたときに実行される処理を提供するスクリプトが少なくとも 2 つ以上ある可能性があります。この問題の厄介な解決策は、この状況が発生する場所を特定し、すべての処理を実行する関数にまとめて呼び出す必要がある処理を結合することです。

このようなクラッシュは、onload よりも onclick の方が一般的ではありませんが、事前にクラッシュを特定してそれらを組み合わせる必要があることは、理想的な解決策ではありません。要素にアタッチする必要がある実際の処理が時間の経過とともに変化するため、1 つのこと、別のこと、または両方を行う場合は、まったく解決策ではありません。

最善の解決策は、イベント ハンドラーの使用を完全に停止し、代わりに JavaScript イベント リスナーを使用することです (これは、JavaScript と JScript が異なる状況の 1 つであるため、対応する Jscript の attachEvent と共に)。これを最も簡単に行うには、最初に addEvent 関数を作成します。この関数は、実行中の言語がサポートする 2 つのイベント リスナーまたは添付ファイルのいずれかを追加します。

要素がクリックされたときに発生させたい処理を次のようにアタッチできます。

要素がクリックされたときに処理されるコードをアタッチするこのメソッドを使用すると、特定の要素がクリックされたときに実行される別の関数を追加する別の addEvent 呼び出しを行うことは、前の処理を新しい処理に置き換えるのではなく、代わりに許可することを意味します。両方の機能が実行されます。 addEvent を呼び出すときに、要素がクリックされたときに実行する関数が要素にアタッチされているかどうかを知る必要はありません。新しい関数は、以前にアタッチされた関数と一緒に実行されます。

要素がクリックされたときに実行されるものから関数を削除する機能が必要な場合は、対応する deleteEvent 関数を作成して、イベント リスナーまたは添付イベントを削除するための適切な関数を呼び出すことができますか?

処理をアタッチするこの最後の方法の 1 つの欠点は、非常に古いブラウザーが、イベント処理を Web ページにアタッチするこれらの比較的新しい方法をサポートしていないことです。膨大な数のエラー メッセージが表示されないようにコードを記述することは別として、J(ava)Script を記述する際にそのような時代遅れのブラウザを無視する人は、今ではほとんどいないはずです。上記の関数は、使用する方法のいずれもサポートされていない場合は何もしないように記述されています。これらの非常に古いブラウザのほとんどは、HTML を参照する getElementById メソッドもサポートしていません。 if (!document.getElementById) は false を返します。 そのような呼び出しを行う関数の上部にも適切です。もちろん、JavaScript を書いている人の多くは、古いブラウザーをまだ使用している人たちに配慮していません。そのため、それらのユーザーは、アクセスするほとんどすべての Web ページで JavaScript エラーが表示されることに慣れているに違いありません。

訪問者が何かをクリックしたときに実行される処理をページに追加するために使用するさまざまな方法はどれですか?あなたのやり方が、ページの下部にある例よりもページの上部にある例に近い場合は、onclick 処理の記述方法を改善して、より優れた方法の 1 つを使用することを検討する時期かもしれません。ページの下部に表示されます。

クロスブラウザー イベント リスナーのコードを見ると、呼び出した 4 番目のパラメーターがあることがわかります。 UC 、その使用は前の説明から明らかではありません。

ブラウザーには、イベントがトリガーされたときにイベントを処理できる 2 つの異なる順序があります。タグからイベントをトリガーしたタグに向かって外側から内側に向​​かって作業することも、最も具体的なタグから始めて内側から外側に向かって作業することもできます。この2つを呼びます 捕獲 と バブル ほとんどのブラウザーでは、この追加パラメーターを設定することで、複数の処理を実行する順序を選択できます。

• uC = キャプチャ フェーズ中に処理する場合は true
• uC = バブル フェーズ中に処理する場合は false。

そのため、キャプチャ フェーズでイベントがトリガーされたタグの周りにラップされた他のタグがいくつかある場合は、最初に最も外側のタグから開始し、イベントをトリガーしたタグに向かって移動し、イベントが関連付けられたタグが処理されると実行されます。バブル段階ではプロセスが逆になり、再び元に戻ります。

Internet Explorer と従来のイベント ハンドラーは、常にバブル フェーズを処理し、キャプチャ フェーズを処理しないため、常に最も具体的なタグから開始して外側に向かって処理します。

したがって、イベント ハンドラーでは次のようになります。

をクリックして xx 最初に alert('b') をトリガーし、次に alert('a') をトリガーしてバブルアウトします。

これらのアラートが、uC が true のイベント リスナーを使用して添付された場合、Internet Explorer を除くすべての最新のブラウザーは、最初にアラート ('a') を処理し、次にアラート ('b') を処理します。