ログイン
問題7

onイベントについて

アイコン画像

問題7:onイベントについて

onイベントの意味はご存知でしょうか?onがなくても動くじゃんと思われていると思いますが、実はonはすごく便利なんです!今回はその例を見ていきましょう。

エディターのアイコンあらかじめエディタに書くコード

                <p>どれかクリックしてみてください</p>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="result"></div>
¥HTML¥
              
                .content{
  cursor: pointer;
  border: 2px solid black;
  display: inline-block;
  margin-right: 30px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
¥CSS¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              $(function () {
  for (var i = 0; i < 3; i++) {
    $(".content").eq(i).on("click", { num: i + 1 }, clicked);
  }
  function clicked(e) {
    $(".result").text(e.data.num + "がクリックされました" );
  }
});
¥JavaScript¥
            

コメントのアイコン解説

まずforを使ってそれぞれのcontentに適切な処理を与えます。onはイベントハンドラにデータを渡すことができます。今回はnumはi+1ですよ、というデータを保存させています。そして今回の場合はclickedとして定義した関数に引数としてeを与え、e.data.numでnumのデータを取得し、resultのtextを作っています。このようにonはデータの保存のようなことが可能なのです。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる