菜鸟求助document.addEventListener和element.addEventListener有什么不同?

Question

//*******elementToDrag就是C1
function drag(elementToDrag,event){
var startX=event.clientX;startY=event.clientY;
var origX=elementToDrag.offsetLeft;origY=elementToDrag.offsetTop;
var deltaX=startX-origX;deltaY=startY-origY;
document.addEventListener("mousemove",moveHandler,true);
function moveHandler(e){
if(!e) e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";

if(e.stopPropagation)e.stopPropagation();
else e.cancelBubble=true;
}
}
//*******
c1=document.getElementById("c1");
c1.addEventListener("mousemove",moveHandler,true);
为什么以上两种情况都可以给C1添加事件句柄?我就是不明白第一个怎么知道给C1添加句柄的,document.addEventListener这句话又没有指定给C1添加.
document.addEventListener   c1.addEventListener有什么不同？

Answer 1

本质上是没什么区别的，document是给全局，而element是只给这个元素添加事件

Answer 2

想要给谁添加事件就　元素.addEventListener

Answer 3

addEventListener
dom2 的东东document 是从文档树的最开始出发
element 针对摸个特定的元素捕捉的时候  从 document 一直到最下面 然后冒泡回来 给 document
element 就从 element 延伸到子节点然后再回朔

Answer 4

document和element在DOM中都是元素，就像OOP中，都是对象。