addEventListener
JavaScript
1btn[i].addEventListener('click', btnClick);
現在の addEventListener
は第三引数を省略可能ですが、後方互換性の為に、第三引数は省略しない事をお勧めします。
switch 文
JavaScript
1function btnClick (event) {
2 for (let token of event.currentTarget.classList) {
3 switch (token) {
4 case 'btn1':
5 case 'btn2':
6 case 'btn3':
7 case 'btn4':
8 case 'btn5':
9 console.log(token);
10 break;
11 }
12 }
13}
RegExp.prototype.test
JavaScript
1function btnClick (event) {
2 for (let token of event.currentTarget.classList) {
3 if (/^btn\d+$/.test(token)) {
4 console.log(token);
5 break;
6 }
7 }
8}
data-*属性
HTML
1<button class="btn" data-index="1">1</button>
2<button class="btn" data-index="2">2</button>
3<button class="btn" data-index="3">3</button>
4<button class="btn" data-index="4">4</button>
5<button class="btn" data-index="5">5</button>
6<button class="btn" data-index="6">6</button>
7<button class="btn" data-index="7">7</button>
8<button class="btn" data-index="8">8</button>
9<button class="btn" data-index="9">9</button>
10<script>
11'use strict';
12function handleClick (event) {
13 const index = event.currentTarget.getAttribute('data-index');
14
15 if (/[1-5]/.test(index)) {
16 console.log('btn' + index);
17 }
18}
19
20for (let btn of document.querySelectorAll('.btn')) {
21 btn.addEventListener('click', handleClick, false);
22}
23</script>
Bubbling Phase
目的次第ですが、私は基本的にこの方法を使います。
HTML
1<p id="btn-group">
2 <button class="btn" data-index="1">1</button>
3 <button class="btn" data-index="2">2</button>
4 <button class="btn" data-index="3">3</button>
5 <button class="btn" data-index="4">4</button>
6 <button class="btn" data-index="5">5</button>
7 <button class="btn" data-index="6">6</button>
8 <button class="btn" data-index="7">7</button>
9 <button class="btn" data-index="8">8</button>
10 <button class="btn" data-index="9">9</button>
11</p>
12<script>
13'use strict';
14function handleClick (event) {
15 const index = +event.target.getAttribute('data-index');
16
17 if (index < 6) {
18 console.log('btn' + index);
19 }
20}
21
22document.getElementById('btn-group').addEventListener('click', handleClick, false);
23</script>
Re: Tubuanpan さん