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

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

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

你好

---

如何操作？

您可以在

窗口中绑定
单击
事件。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);
        };
    }
};

然后，您可以使用以下命令将事件绑定到循环中：

moves[i].onclick = moveableFunc;

当然，最好使用
addEventListener
而不是
onclick
来绑定事件。以下是关于这方面的一些信息：

参考资料：





举个例子，使用jQuery，它可以像这样完成：

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

（在这里，您修改了
moveableFunc
的参数，就像我前面所说的那样）
您是否使用普通的
javascript
或您是否已经使用或计划使用类似
jquery
的库？moveableFunc的实现仅由javascript.+1事件实现，如果我更严格一点，并且说最好使用
addEventListener
而不是
onclick
，因为在=总是有这样的风险，即您在其他地方覆盖了已设置的回调，却没有注意到它。@t.niese非常正确。大多数情况下，您应该使用
addEventListener
，但尽管可能还有其他事件处理程序，但没有理由假设还有其他事件处理程序。无论如何，我同意，我添加了一个解释差异的链接——对我来说，没有必要再多解释了——我尝试了第一个选项（现在），在第二行之后，我得到：moves.length=0。html代码是：我在index.html的头中写了：“window.onload=init（）；”。init（）具有上面的“函数”代码。我发现init（）在主体创建之前运行（firebug）。为什么会这样？
$('[data-option="moveable"]').on("click", moveableFunc);