addEventListenerについて

クリック時に処理をしたいと思いイベントリスナーを使用していますが、あるクラスのクリックだけに反応させたいのですが、どのようにやればよいでしょうか? また、クラスは複数指定したい場合はどのように書きますか。　下記のようにしたのですけど、うまく動きませんでした。


よろしくお願いします。

//あるクラスの時のクリックイベント
document.getElementsByClassName('name').addEventListener('click', function(e) {

//処理

});

//複数クラス指定
document.getElementsByClassName('name1 name2').addEventListener('click', function(e) {

//処理

});

No.1 ベストアンサー 回答者： yambejp 回答日時： 2018/07/30 20:53

考え方は２つ

(1)documentにaddEventListenerして、各要素のクラスをチェックする
(2)querySelectorでクラスを元に掴んで、各要素にaddEventListerする

sample

<script>
//(1)の例
document.addEventListener('click',function(e){
var t=e.target;
if(t.classList.contains("c1") || t.classList.contains("c2")){
alert("1 or 2");
}
});
//(2)の例
window.addEventListener('DOMContentLoaded', function(e){
[].forEach.call(document.querySelectorAll('.c3,.c4'),function(x){
x.addEventListener('click',function(e){
alert("3 or 4");
});
});
});
</script>

<div class="c1">c1</div>
<div class="c2">c2</div>
<div class="c1 c2">c1 c2</div>
<div class="c3">c3</div>
<div class="c4">c4</div>
<div class="c3 c4">c3 c4</div>

この回答へのお礼

サンプルを用意していただいてありがとうござまいす。知らないような書き方があるので、調べておりますが、とても勉強になります。

お礼日時：2018/07/31 13:48