鼠标事件

鼠标事件

• 距离可视区域左上角位置

  • clientX: 33

  • clientY: 31

  ​

• 如果目标对象是定位方式，值于offset相似，如果目标对象是非定位方式，取父容器的左上角位置，如果父容器未定位，继续向上取

  • layerX: 28
  • layerY: 20

• 相对事件目标对象的左上角位置

  • offsetX: 16
  • offsetY: 9

• 鼠标移动时相对上次获取坐标的距离

  • movementX: 0
  • movementY: 0

• 相对页面顶端左上角位置

  • pageX: 28
  • pageY: 28

• 相对屏幕左上角位置

  • screenX: 38
  • screenY: 107

• x，y 和clientX，clientY相同

• x: 32

• y: 33

• 按下键点击鼠标时变为true

​ altKey: false

​ ctrlKey: false

​ metaKey: false

​ shiftKey: false

• 针对mousedown事件的属性，判断按下的键

​ 左键 中键 右键

​ button: 0 1 2

​ buttons: 0 4 2

​ which: 1 2 3

1. click 点击左键
2. dblclick 双击左键
3. mousedown 按下键
4. mouseup 释放键
5. mouseover 滑过
6. mouseout 滑出
7. mouseenter 进入
8. mouseleave 离开
9. mousemove 移动
10. contextmenu 右键菜单

FocusEvent 焦距事件

• focus 汇聚焦距
• blur 失去焦距
• focus汇聚焦距的方式有点击，tab切换

input事件

• inputEvent

   var input0=document.querySelector("#input0");
         input0.addEventListener("input",inputHandler);
  
        function inputHandler(e){
            console.log(e);
                  e.data: "o"  输入的内容
                  e.inputType: "insertText" 输入的类型  insertCompositionText
                               包括插入文本，删除文本，插入输入法文本，剪切粘贴文本等等
                  e.isComposing: true   是否是输入法文本   
              
           if(!isNaN(e.data)) input0.value=input0.value.replace(e.data,"");
          }
  
         // 节流
  

阻止默认事件

• 1、表单事件中的submit reset 使用阻止默认事件可以取消提交和重置

   var form=document.querySelector("form");
          form.addEventListener("submit",formHandler);
          form.addEventListener("reset",formHandler);
  
          function formHandler(e){
              e.preventDefault();
              
          } 
  

• 2、当使用contextmenu事件，取消鼠标右键菜单

  document.addEventListener("contextmenu",mouseHandler);
          function mouseHandler(e){
              e.preventDefault();
              
          }
  

• 3、当针对元素拖拽时，元素内有文本，文本会被选中

  var div=document.querySelector("div");
          document.addEventListener("mousedown",mouseHandler);
  
          function mouseHandler(e){
              e.preventDefault();
              
          }
  

• 4、图片拖拽时产生禁止拖拽图标

  var img=document.querySelector("img");
          img.addEventListener("mousedown",mouseHandler);
  
          function mouseHandler(e){
              e.preventDefault();
              
          }