JavaScript イベント学習 第 3 章 初期のイベント ハンドラー_JavaScript スキル

これらの古いブラウザは、Netscape によって発明されたイベント ハンドラーを登録する 1 つの方法のみをサポートしています。 Netscape が最初に開発したため、Microsoft が JavaScript イベントをサポートするブラウザを構築したい場合は、Netscape の先例に従う必要があるため、互換性の問題は発生しません。したがって、このモードは、イベントをまったくサポートしない Mac 上の IE3 を除き、JavaScript をサポートするすべてのブラウザで動作します。
イベント ハンドラーの登録
インライン イベント登録モデルでは、イベント ハンドラーは次のような HTML 要素の属性のようなものです。

このリンクでクリック イベントが発生すると、イベント ハンドラーがトリガーされ、スクリプトが実行されます。警告ダイアログ ボックスが表示されます。 JavaScript 関数をトリガーすることもできます。

上記 2 つの例のイベント名の大文字と小文字は単に習慣の問題です。 , HTML 大文字と小文字は区別されないので、自由に記述できます。 XHTML では、すべての属性名を小文字にする必要があるため、XHTML を使用している場合は、名前を onclick として記述する必要があります。
使用しないでください
このインライン登録モデルは非常に古く信頼性がありますが、欠点があります。彼は、ここには属さない XHTML 構造層内に JavaScript コードを記述するように要求しています。
したがって、この方法は使用しないことを強くお勧めします。ここに詳しい説明があります。
これらの古いモデルを理解することは、JavaScript イベント処理の全体的な感覚をつかむのに非常に役立ちますが、以下で説明する最新のモデルを使用することをお勧めします。
デフォルト アクション
当時、Netscape はデフォルト アクションを設定しており、デフォルト アクションの実行を防ぐ方法がありました。彼のモデルはブラウザ戦争と標準を救い、今でもうまく機能します。
ご存知のとおり、ユーザーがリンクをクリックすると、ブラウザは href 属性に従ってページを読み込みます。これはリンクに対するデフォルトのアクションです。しかし、onclick イベント ハンドラーを定義するとどうなるでしょうか?実装されるべきですが、いつになるのでしょうか？

このリンクをクリックすると、イベント ハンドラーが最初に実行されます。結局のところ、デフォルトのアクションが発生すると、新しいページがロードされ、イベント ハンドラー自体を含む古いページがメモリから消去されます。 onclick イベント ハンドラーが実行される場合は、デフォルト アクションの前に実行する必要があります。
これには非常に重要な原則があります。イベントがデフォルト アクションとイベント ハンドラーの両方をトリガーする場合:
、イベント ハンドラーが最初に実行されます
、デフォルト アクションは後で実行されます
。つまり、上記の例では、 doSomething(. ) が最初に実行され、ブラウザがリンクを開きます。
デフォルト イベントのブロック
これらが決定されると、ほとんどの人はデフォルト イベントを防ぐ方法を考え始めます。この例では、ブラウザーが新しいページを開けないようにすることができます。
したがって、イベント ハンドラーはブール値 (true または false) を返すことができます。false の意味は、「デフォルトのアクションを実行しない」ということです。このようにして、例を次のように変更できます:

このリンクは実行されません。この関数が実行されると、プログラムは false を返し、ブラウザーにデフォルトのアクションを実行しないように指示します。
デフォルトのアクションをいつ実行するか、いつ実行しないかを関数に決定させる必要がある場合があります。したがって、例を次のように変更できます:

コードをコピーします コードは次のとおりです:

function doSomething()
{
returnconfirm('本当にこのリンクをたどりますか?')
}

これは (非常に単純な) ユーザー操作です。ユーザーに質問が表示され、答えが「はい」の場合、関数は true を返します。キャンセルされた時間が長すぎる場合は、false を返します。この戻り値はイベント ハンドラーによってキャプチャされ、イベント自体に渡されます。 flase の場合、デフォルトのアクションは実行されず、リンクは入力されません。
ただし、デフォルトのアクションすべてをブロックできるわけではありません。たとえば、アンロード イベントは機能しません。ユーザーがブラウザ ウィンドウを閉じると、アンロード イベントがトリガーされます。ウィンドウが閉じないようにすることができた場合、ユーザーの希望に反してウィンドウは開いたままになりますか?もちろん違います。
アンロードを防ぐために、Microsoft の beforeunload 属性を試すことができます。ユーザーが非常に混乱する状況を作り出す代わりに、このアクションを確認することを選択します。使わないほうがいいですよ。
デフォルトのアクションを防ぐために false を返すことは、すべてのブラウザーでサポートされています。これは、イベント ハンドラーの基本コンポーネントです。現在のイベント ハンドラー モデルには、デフォルトのアクションを防ぐいくつかの新しいメソッドも追加されています。
W3C は、preventDefalut() メソッドをイベントに追加しました。このメソッドを参照すると、デフォルトのアクションがブロックされます。
Microsoft は、returnValue 属性をイベントに追加しました。値を false に設定すると、デフォルトのアクションもブロックされます。
しかし、これらは必要ありません。単に false を返すだけで十分です。
window.status
ここでは false を返す例外があります。マウスがリンク上を通過したときにウィンドウのステータス バーが変化するように設定した後、ステータス バーにリンク アドレスを表示するというデフォルトの動作を回避したい場合は、true を返す必要があります:

コードをコピーします コードは次のとおりです:

onMouseOver="window.status = 'このリンクはどこかに行きます '; return true">

これを行わないと、コードは機能しません。何が起こっているのか誰も知りません、ただ奇妙なことです。
this
JavaScript では、this キーワードは通常、関数の所有者を指します。これがイベントが発生した HTML 要素を指している場合は、すべて問題なく、多くのことを簡単に行うことができます。
残念ながら、これは非常に強力ではありますが、どのように機能するかを正確に知らないと使用するのがまだ困難です。これについては別の場所で詳しく説明しましたが、ここではインライン モードでの概要を説明します。
インライン モードでは、これをパラメーターとしてイベント ハンドラー関数に渡すことができます。

コードをコピーします コードは次のとおりです:

function doSomething(obj)
{
// obj はリンク
を参照します

関数には参照が渡され、obj に保存されます。これで、どの要素がクリックされたかを見つけるためにドキュメントを走査する必要はなくなりました。要素は変数 obj に安全に保存されます。

コードをコピーします コードは次のとおりです:

関数 doSomething(obj)
{
var linkTo = obj.href;
returnconfirm('本当に 'linkTo' へのリンクをたどりますか?')
}

関数リンクを受け入れます 参照は obj に保存されます。これで、このリンクのリンク アドレスを読み取って確認できるようになります。このトリックはどのリンクにも適用できます。クリックしたリンクの実際のアドレスが常に表示されます。
続き
学習を続ける必要がある場合は、次の章をお読みください。