原生JS添加鼠标事件

  1. >  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>无标题文档title>  
  6. <style>  
  7. body { background-color:#bbb;}  
  8. canvas { background-color:#fff}  
  9. style>  
  10. head>  
  11.   
  12.   
  13.   
  14. <body>  
  15. <canvas id="cnavas" width="400" height="400">canvas>  
  16. <script>  
  17. window.onload = function(){  
  18.     var canvas = document.getElementById('cnavas');  
  19.       
  20.     function onMouseEvent(event){  
  21.         console.log(event.type)   
  22.     }  
  23.       
  24.     canvas.addEventListener("mousedown",onMouseEvent,false)  
  25.     canvas.addEventListener("mouseup",onMouseEvent,false)  
  26.     canvas.addEventListener("click",onMouseEvent,false)  
  27.     canvas.addEventListener("dblclick",onMouseEvent,false)  
  28.     canvas.addEventListener("mousewheel",onMouseEvent,false)  
  29.     canvas.addEventListener("mousemove",onMouseEvent,false)  
  30.     canvas.addEventListener("mouseover",onMouseEvent,false)  
  31.     canvas.addEventListener("mouseout",onMouseEvent,false)  
  32.       
  33. }  
  34. script>  
  35. body>  
  36. html>  

你可能感兴趣的:(js)