Question

我在JS（moveableFunc）中实现了一个可移动的div函数。我使用onclick =“moveableFunc（event，this）”为每个div（或元素）移动它。我更喜欢将此函数用作属性，代码如下：

<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"]');，您甚至可以将选择器更改为<div>，这样可以加快搜索速度。

或者，如果您能够将moveableFunc的参数重组为：

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

然后你可以使用以下命令在循环中绑定事件：

moves[i].onclick = moveableFunc;

当然，最好使用addEventListener代替onclick来绑定事件。以下是有关此问题的一些信息：addEventListener vs onclick

参考文献：

就像一个例子，使用jQuery，它可以像：

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

（就像我之前说过的那样修改了moveableFunc的参数）

如何创建自己的属性（HTML5）

1 个答案: