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

How do I make my own attributes (HTML5)

本文关键字：HTML5 属性 自己的 何制作      更新时间：2023-09-26

我在JS中实现了一个可移动div函数(moveableFunc)。我使用onclick="moveableFunc(event,this)"来移动每个div(或元素)。我更喜欢使用这个函数作为属性，代码如下:

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

我该怎么做?

您只能为具有该属性的元素在window.onload中绑定click事件，例如:

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);
        };
    }
};

如果您知道这将只针对<div> s，您甚至可以将选择器更改为.querySelectorAll('div[data-option="moveable"]');，因此它将加快搜索速度。

或者你可以将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的参数，就像我之前说的)

相关文章：