dragover vs dragenter events of HTML5 drag & drop

Question

I want to know the difference of dragover and dragenter events of HTML5 drag &drop.

I'm not clear about the difference.

Answer 1

The dragenter event happens at the moment you drag something in to the target element, and then it stops. The dragover event happens during the time you are dragging something until you drop it.

Look here:

$('.dropzone').on("dragover", function (event) {
    console.log('dragover');
});
$('.dropzone').on("dragenter", function (event) {
    console.log('dragenter');
});

Now see the console:

As you can see the dragenter happen once (when you drag element in to the target).

But the dragover event happen every few hundred milliseconds.

The same difference exist between drag and dragstart, dragstart happen once but drag happen every few hundred milliseconds.

Answer 2

Based on the dragenter and dragover MDN doc...

dragover

The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).

dragenter

The dragenter event is fired when a dragged element or text selection enters a valid drop target.

The dragover is triggered after a small delay (every 350 ms, I think) while the cursor stays over the element.