JQueryでloadを使ったときのイベント処理(on)

March 16, 2013,
tags: javascript jquery


このエントリーをはてなブックマークに追加

久しぶりに懐かしい記事をみつけてしまいました。
JQueryでloadを使ったときのイベント処理(hover)

あの頃は若かったなー(笑)

んで、まあこの記事って、menu用のhtmlをloadで呼んでて、load自体がajaxだからイベントが設定されてないよねーって話ですね。
で、その当時僕はliveとかdelegeateとか分からなかったし仕方ないかと思っています。

で今の時代はon全盛期なわけで、hoverとか使ったらもうね・・・恥ずかしいですよねw
ってことで今の時代ならこんな感じで書くのではないのかというのをさらしておきます

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<title>ポリドッグ ラボ | HOME</title>
</head>
<body>
<div id="menu">
</div>
<div id="content">
<h1>ポリドッグ ラボ</h1>
</div>

<script>
$(function(){

  //menu.htmlの読み込み
$("#menu").load("menu.html");
  // 画像の切り替え
  $('#menu').on('mouseenter','a',function(event){
    var img = $(event.delegateTarget).find('img');
    img('href',img.attr('href').replace('_off','_on'));
  });
  $('#menu').on('mouseleave','a',function(event){
    var img = $(event.delegateTarget).find('img');
    img('href',img.attr('href').replace('_on','_off'));
  });

});
</script>

前回のよりももっとシンプルになっていて、分かりやすいかと思います。
イベントをどこで受け止めるかって話で、前のやつだとmenu.html側のAタグの要素でイベントを受け取っていた訳ですが
今回は、div#menuの要素でイベントをキャッチしているので、中のDOMが後から生成されようと問題ない訳ですね。

Flexの時とかである程度イベント理解していましたが、以外とjsでは意識したことなかったので最近までdelegateとか知らなかったっすw
まあイベントの伝播に関しては「javascript バブリング」とかでググればいい参考記事がいっぱい見つかるかと思います。

※動作チェックしてないので、動かなかったらごめんなさい。指摘してくださいw

comments powered by Disqus