JS - 事件处理：鼠标移动监听事件、div块跟随鼠标移动事件、事件的绑定、实现拖拽效果

// 获取div元素
var box = document.getElementById('box');
 
// 鼠标按下事件绑定
box.addEventListener('mousedown', function(e) {
    // 阻止默认事件，防止选中文字等
    e.preventDefault();
    // 开始拖拽
    document.addEventListener('mousemove', move);
    // 鼠标抬起时停止拖拽
    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', move);
    });
 
    function move(e) {
        // 更新div的位置
        this.style.left = e.pageX + 'px';
        this.style.top = e.pageY + 'px';
    }
});

这段代码实现了一个基本的拖拽功能。当用户在box上按下鼠标时，开始监听鼠标移动事件并更新box的位置。当鼠标抬起时，停止监听鼠标移动事件。这里使用了addEventListener和removeEventListener来动态地绑定和解绑事件处理函数，避免了不必要的事件监听，并且保持了代码的简洁性。