divの中のdiv

divの中の処理で悩みまくりだったのがようやく解決したのでメモ。
親要素をクリックしたときと、子要素をクリックしたときのイベントを別にしたく、
親要素クリック時は子要素以外の部分をクリックしたときにイベントを発生したくて奮闘。

<div id="one">
    <div id="two">
        <input type="text" id="searchText">
        <input type="button" id="search" value="検索">
    </div>
</div>

上記の状態でoneのクリックイベントを発生させると、
two以下の子要素をクリックしても発生したので、
試行錯誤した結果、event.targetの場合分けで解決。
jqueryでやったので、jqueryで記述。
:notやcontainsなどなど色々試してみたけど、うまくいかなかったので、
クリックイベント発生させて判断する方法でやってみた。

$('div').click(function(){
    if(event.target == $('#search')[0]) {
        〜検索処理〜
    else if(event.target == $('#one')[0]) {
        〜別の処理〜
    }
});   

event.targetとevent.currentTargetの違いは
デバッグすればわかりやすい。
上記ifでevent.currentTarget使ったらdiv#oneになると思われる。

すごい参考になったサイト
http://www.jquerystudy.info/reference/events/currentTarget.html

javascript：document.getElementById('id')
jquery：$('#id')[0]
id取得時の書き方を忘れないようメモ。

とりあえず、これでwidgetの作成が一歩前進。