【JavaScript】イベントリスナーで要素の属性値を使って動的なイベントを作成するサンプル

ボタンのvalue属性を使って、イベントの内容を動的に変化させるサンプル。

ソースコード

■HTML

<div id="buttons">
    <input type="button" value="ボタン１">
    <input type="button" value="ボタン２">
    <input type="button" value="ボタン３">
</div>

</div>

■JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var frag = document.createDocumentFragment();
    var buttons = document.getElementById('buttons');
    var child = buttons.firstElementChild;

    while(child) {
        child.addEventListener('click', function(e) {
            var data = e.target.getAttribute('value');
            window.alert(`${data}が押されました。`);
        })
        child = child.nextElementSibling;
    }
    
}, false)

document.addEventListener('DOMContentLoaded', function() {

var frag = document.createDocumentFragment();

var buttons = document.getElementById('buttons');

var child = buttons.firstElementChild;

while(child) {

child.addEventListener('click', function(e) {

var data = e.target.getAttribute('value');

window.alert(`${data}が押されました。`);

})

child = child.nextElementSibling;

}

}, false)

このように書いても動く。

var data = this.getAttribute('value');

1	var data = this.getAttribute('value');

ソースコード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル