前端之鼠标事件.click(单击事件)，可以通过点击鼠标左键（默认情况），也可以通过键盘的回车触发 2.dbclick双

day5

鼠标事件

contextmenu：右键菜单事件，触发右键弹出菜单
selectstart：文本选中事件，当用户开始选择文本时触发
wheel：滚轮事件，当用户使用鼠标滚轮时触发
dragstart：拖拽开始事件，当用户开始拖拽元素时触发
drag：拖拽事件，当元素正在被拖拽时触发
dragenter：拖拽进入事件，当拖拽元素进入目标元素时触发
dragleave：拖拽离开事件，当拖拽元素离开目标元素时触发
dragover：拖拽悬停事件，当拖拽元素悬停在目标元素上方时触发
drop：拖拽放置事件，当拖拽元素被放置到目标元素上时触发
click(单击事件)，可以通过点击鼠标左键（默认情况），也可以通过键盘的回车触发
dbclick双击事件
mousedown:按下鼠标是触发，不能通过键盘触发
mouseup：用户是否鼠标时触发，不能通过键盘事件获得
mouseenter:当元素首次进入元素范围时触发，不能进行冒泡
mouseover:当鼠标在元素上面，或者子元素上面时触发，会冒泡
mouseleave:当鼠标离开目标元素位置时触发，不冒泡
mouseout:当鼠标离开目标元素或者子元素时会触发此事件，会冒泡（不经常使用）
mousemove:鼠标在元素内部移动时，会重复触发此事件（重点）

区别： mouseenter和mouseover都是在进入第一个节点时进行触发，不同的是，mouseenter不会冒泡，只会触发一次，而mouseover会冒泡，会触发多次 mousemove是在鼠标在元素内部进行移动时，进行触发，会一直触发 mouseleave:只在鼠标离开元素时触发一次，当鼠标再次进入有可以出去时，再进行触发。下面是完善后的示例代码：

javascriptCopy code (function(){ window.onload = function(){ var box = document.querySelector('.box');

  box.onclick = function(){
    console.log('click');
  }

  box.ondblclick = function(){
    console.log('double click');
  }

  box.onmousedown = function(){
    console.log('mouse down');
  }

  box.onmouseup = function(){
    console.log('mouse up');
  }

  box.onmouseenter = function(){
    console.log('mouse enter');
  }

  box.onmouseover = function(){
    console.log('mouse over');
  }

  box.onmouseleave = function(){
    console.log('mouse leave');
  }

  box.onmousemove = function(){
    console.log('mouse move');
  }

  box.oncontextmenu = function(){
    console.log('context menu');
  }

  box.onselectstart = function(){
    console.log('select start');
  }

  box.onwheel = function(){
    console.log('wheel');
  }

  box.ondragstart = function(){
    console.log('drag start');
  }

  box.ondrag = function(){
    console.log('drag');
  }

  box.ondragenter = function(){
    console.log('drag enter');
  }

  box.ondragleave = function(){
    console.log('drag leave');
  }

  box.ondragover = function(){
    console.log('drag over');
  }

  box.ondrop = function(){
    console.log('drop');
  }
}

})();