3

JavaScript jQuery イベント処理

イベント (「クリック」など) が親要素の 1 つの関数と子 DOM 要素の別のハンドラー関数をバインドする場合、それらのどれが呼び出されますか? それらすべてが呼び出される場合、それらはどの順序で呼び出されますか?

4

2 に答える 2

5

イベントは DOM ツリーを「上に」バブルするため、要素とその親のハンドラーがある場合は、子要素のハンドラーが最初に呼び出されます。

1 つの DOM 要素のイベントに対して複数のハンドラーを登録する場合 (1 つのボタンに対して複数の「クリック」ハンドラーなど)、ハンドラーは要素にアタッチされた順序で呼び出されます。

ハンドラーは、完了後に何が起こるかを変更するためにいくつかのことを行うことができます:

  • 渡されたイベント パラメータを使用して呼び出しevent.preventDefault()、「ネイティブ」アクションが発生しないようにします。
  • event.stopPropagation()イベントが DOM ツリーをバブリングしないようにするための呼び出し
  • ハンドラーから false を返し、伝播を停止し、デフォルトを防止します

一部の入力要素 (チェックボックス、ラジオ ボタン) では、処理が少し奇妙であることに注意してください。ハンドラーが呼び出されると、ブラウザーはチェックボックスの「チェック済み」の値を以前の値の反対に設定しています。つまり、チェックされていないチェックボックスがある場合、"クリック" ハンドラーは、呼び出されたときに (ユーザーがクリックした後)、"checked" 属性が "true" に設定されることに気付きます。ただし、ハンドラーが false を返す場合、チェックボックスの値は実際にはクリックによって変更されず、チェックされていないままになります。つまり、ブラウザーはハンドラーを呼び出す前に「ネイティブ」アクション (要素の「checked」属性の切り替え) の半分を実行しますが、実際にはハンドラーが false を返さない場合 (または " を呼び出す場合) にのみ要素を更新します。

于 2010-03-03T16:04:37.497 に答える
0

子が最初に呼び出され、次に親が呼び出されます。

イベントがバブルアップすると、イベントは子から親に移動します。同じ要素で、ハンドラーはバインドされた順序で実行されます。

于 2010-03-03T16:05:23.833 に答える