javascript - 独自の属性を作成する方法 (HTML5)

Question

JSで可動div関数(moveableFunc)を実装しました。各 div (または要素) を移動するために onclick="moveableFunc(event ,this)" を使用しました。この関数を属性として使用することを好み、コードは次のようになります。

<div id="div1" data-option="moveable" class="div1">
    hello
</div>

どうすればいいですか？

Answer 1

次のように、その属性を持つ要素に対してのみclickイベントをバインドできます。window.onload

window.onload = function () {
    var moves = document.querySelectorAll('[data-option="moveable"]');
    for (var i = 0; i < moves.length; i++) {
        moves[i].onclick = function (e) {
            e = e || window.event;
            moveableFunc(e, this);
        };
    }
};

.querySelectorAll('div[data-option="moveable"]');これが s のみを対象とすることがわかっている場合は、セレクターを に変更することもできる<div>ため、検索が高速化されます。

または、moveableFuncのパラメータを次のように再構築できた場合:

function moveableFunc(e) {
    // Use `this` to reference the element that was clicked
}

次に、次を使用してループ内のイベントをバインドできます。

moves[i].onclick = moveableFunc;

もちろん、イベントをバインドするaddEventListener代わりに使用する方が望ましい場合もあります。onclickこれに関するいくつかの情報があります: addEventListener と onclick

参考文献:

• https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

例として、jQuery を使用すると、次のように実行できます。

$('[data-option="moveable"]').on("click", moveableFunc);

moveableFunc（前に言ったようにパラメータを変更した場所）