主にイベントハンドラについて扱います。
いくつかピックアップして見てみます。
1. click(そもそもクリックイベントって括りがよくなかった..)
両方とも同じ挙動、要素(ここではdiv要素)にイベントハンドラを渡しています。
clickはmousedownとmouseupの組み合わせなので、以下のように処理を分けることも。
2. one
一度だけ有効なイベントのハンドラ
3. hover
要素にマウスカーソルを当てた際 / マウスカーソルを外した際にイベントが着火します。
4. keydown
キー入力した際にイベントが着火します。
ちょっとした実験をしてみます。
何も面白くない例ですが。
ソース
ロジック
・1個目の要素をクリックで要素(追加DIVと記載)を追加
・キー入力で全要素にキーコードを表示
0.初め
いつも通りです。
1.1つ目の要素をクリックする
要素が追加されました。afterメソッドで直後に要素を挿入しています。
2.キー入力
適当なキーを入力。全ての要素が書き換わっています。
3.1つ目の要素をクリックする
要素が追加されました。afterメソッドで直後に要素を挿入しています。
2番目に挿入される理由は
4.キー入力
問題.
2番目の要素をクリックした際、想定される結果は次のうちどれでしょうか。
・全ての要素が、クリックに対応するキーコードに置き換わる
・追加DIVと記載の要素が2番目に挿入される
・何も起こらない
復習用に問題を置いておきます。コード読めますかって話でしかありませんが。
ところでソース転記した途端にインデントが崩れるの、どうにかなりませんかね...