javascript - 如何制作自己的属性 (HTML5)

Question

我在 JS (moveableFunc) 中实现了一个可移动的 div 函数。我对每个 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 vs 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我之前说的参数）