javascript - drag 和 dragstart 事件类型之间的确切区别(？)

Question

从 MDN 文档我可以读到:

Drag - Fired when an element or text selection is being dragged. Dragstart - Fired when the user starts dragging an element or text selection

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

但是......为什么当我将它附加到“drag”事件时我的功能被浏览器忽略，而当我给它“dragstart”时却完全没问题？根据定义，我假设它们都做同样的事情(？)

function itemDrag(e) {
e.dataTransfer.setData("text", e.target.id);  
}


document.getElementById("try1").addEventListener("dragstart",function(){
    itemDrag(event);
});

Answer 1

The dragstart event is fired when the user starts dragging an element or text selection.

The drag event is fired when an element or text selection is being dragged (every few hundred milliseconds).

所以 dragstart 应该触发一次，drag 应该连续触发。

这来自 MDN 页面。

---

https://developer.mozilla.org/en-US/docs/Web/Events/drag

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

---

例子:

let continu = 0;

document.addEventListener("dragstart", function( event ) {

     console.log('start');
     
}, false);
  
document.addEventListener("drag", function( event ) {

  if(continu < 5){
     console.log('continu');
  }
  
  continu ++;
  
}, false);

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

---

拖动相关事件:

• drag
• dragstart
• dragend
• dragover
• dragenter
• dragleave
• dragexit
• drop