Javascript 在mousedown和mouseup上绑定和解除绑定mousedown处理程序

我有一个html表，其中包含拖放列、可调整大小的行和可调整大小的列，这些列根据mousedown、mousemove和mouseup进行更改。为了获得更好的性能，我是否应该让文档在mousemove期间不断检查“鼠标是否已放下，如果是，是否用于拖放、可调整大小的行或可调整大小的列”，或者我是否应该在mousemove位于特定位置时将mousemove处理程序附加到文档，然后在mouseup时将其卸下？单击后绑定和解除绑定处理程序的成本有多高？下面是一个文档始终检查mousedown与仅在mousedown和鼠标单击之间检查的示例：

/* document is always checking mousemove */

$(selector).mousedown(function(){
    dropndrag = true;
});

$(document).mousemove(function(){
    if (dropndrag == true) {
        //do mouse move stuff
    }
});

$(document).mouseup(function(){
    if (dropndrag == true) {
        dropndrag = false;
    }
});


/* mousemove only bound to document after mousedown */

$(selector).mousedown(function(){
    // attach handlers
    $(document).mousemove(mousemove); 
    $(document).mouseup(mouseup);
});

function mousemove(){
    // do mouse move stuff;
};

function mouseup() {
    //unbind mousemove and mouseup handlers
    $(document).off('mousemove', mousemove);
    $(document).off('mouseup', mouseup);
}

---

实际上，最快的方法可能是事件委派：

document.addEventListener（'onmousemove'，myEventHandler）

有一个很好的例子和讨论为什么这是最快的

更好的方法是将事件侦听器附加到特定的DOM对象，在您的示例中，是一个包装表的
或类似的对象：
document.getElementById（“mydiv”）.addEventListener（“单击”，函数（）{
document.getElementById（“demo”）.innerHTML=“Hello World”
（示例来自。）

通过这种方式，您可以避免重复附加和删除处理程序的开销，还可以避免处理程序被不会触发任何更改的事件触发（即在鼠标向下移动页面中的其他位置时移动鼠标）.
毫无疑问，绑定/解除绑定是多余的操作，我确信这比存储状态的“全局”上下文中的1个变量要慢。
此外，一个好的做法是为每个事件和筛选器设置一个文档侦听器，例如“开关/案例”，它只会为某些元素启动函数，例如：

var events = ['mousedown', 'mouseup', 'mousemove'];

var dragged = false; 

var eventHandler = function (e) {
    switch (e.type) {
        case 'mousedown':

            switch (e.srcElement.id) {
                case 'test-block':
                    if (dragged) return;
                    dragged = true;

                    console.log('you clicked on the test-block');
                    break;
            }

            break;
        case 'mouseup':

            break;
        case 'mousemove':

            break;
    }
};

for (var i = 0; i < events.length; i++) {
    $(document)[events[i]](eventHandler);
}

var events=['mousedown'，'mouseup'，'mousemove']；
var=false；
var eventHandler=函数（e）{
开关（e型）{
案例“mousedown”：
开关（e.srcElement.id）{
案例“试块”：
如果（拖动）返回；
拖动=真；
log（“您单击了测试块”）；
打破
}
打破
“鼠标”一案：
打破
案例“mousemove”：
打破
}
};
对于（var i=0；i
我总是喜欢检查变量，似乎更快！