JavaScript イベントハンドラについて

Question

JavaScriptでのイベントハンドラについて、

onClick時のイベントで、下記のコードでonClickアクションはどこに指定するべきでしょうか。
また、mouseOver等のイベントもonClick時と同じ要素でよいのでしょうか。

教えていただけますと幸いです。
よろしくお願いいたします。

<div onClick='handleClick'>                           ...①
  <div onClick='handleClick'>テスト1</div>   ...②
  <div onClick='handleClick'>テスト1</div>   ...②
</div>

Answer 1

①と②で意味が違いますが、いいんですか？
もし、①の要素が②を二つ含んでいるよりも大きい場合、等価になりません。

何をやりたいかによって、違ってくると思いますよ。

Comments

[退会済みユーザー]

失礼しました。
親要素のdivと子要素のdivをどちらを触っても、反応するようにしたいです。
この場合、両方にonClickをつけるものでしょうか。

下記のスタイルでお願いします。
親要素のWidth:40px, Height:40px
子要素のWidth:20px, Height:10px

[退会済みユーザー]

画像の添付ありがとうございます。
1,2どちらを触っても、イベントが発火するようにしたいです。

[shi_ue]

何をするかによって違うと思いますけどね・・・
①で両方ともイベントが出ますが、失礼ながら、そんな単純な話なら質問にもならないような…
やってみれば分かることですし。

ちなみに両方書くと、②のエリアでクリックされると二回 handleClick が動いてしまいます。

[退会済みユーザー]

失礼しました。

1で親要素と子要素の両方ともイベントが発火しますが、そのあとの処理で、DOMを取得して操作したい場合、evet.targetが親要素をクリックした場合と子要素をクリックした場合で変わると思うのですが、これは毎回if文などで処理をわけるべきなのでしょうか。

[退会済みユーザー]

例えば、下記のようなコードです。

var thisElement = event.target;
if(thisElement.id != 'back_btn') {
this.backAnimation(thisElement.parentNode);
} else {
this.backAnimation(thisElement.parentNode.parentNode);
}

[shi_ue]

だから、言ったのに・・・そのようなことは質問に追記してください。
ここで、コメントの応酬でやり取りするのは不毛です。

Answer 2

document.getElementById( 'root' ).addEventListener ( 'click', function( event ){
	event.stopPropagation();
	console.log( event.target.id );
}, false );

<div id='root'>
	<div id='test1'>テスト1</div>
	<div id='test2'>テスト2</div>
</div>
```**動くサンプル：**[https://jsfiddle.net/bk8cmtje/](https://jsfiddle.net/bk8cmtje/)

Answer 3

こんな風にするとよいです

<script>
try{
document.addEventListener ('click',function(e){myfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){myfunc(e)});
}
function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="DIV"){
    handleClick(t);
  }
}
function handleClick(t){
  console.log(t.id);
}
</script>
<div id="d1" style="height:100px;background-Color:lime;">
<div id="d2" style="height:30px;background-Color:yellow;">テスト1</div>
<div id="d3" style="height:30px;background-Color:aqua;">テスト2</div>
</div>

Answer 4

その前にhandleClick()と括弧を入れないと動かないです

Answer 5

両方という意味では①でいいと思いますが
②の処理を分けるなら②にそれぞれ必要かと

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。

①で実装していたのですが、親子両方にイベントをつけるのか、
親要素だけでいいのか気になり、質問させていただきました。

子要素のdivがクリックされる時の場合を書くべきなのでしょうか。

[退会済みユーザー]

①と②は同じ処理です。