鼠标事件、聚焦输入事件、节流防抖、按键事件、滚轮事件

鼠标事件

click  点击
dblclick  双击
mousedown  按键鼠标键
mouseup    释放鼠标键
mouseover  鼠标滑入
mouseout   鼠标滑出
mouseenter  鼠标进入
mouseleave  鼠标离开
mousemove  鼠标移动
contextmenu  右键菜单

mouseover  鼠标滑入
mouseout   鼠标滑出
mouseenter  鼠标进入
mouseleave  鼠标离开

mouseover  mouseout  可以冒泡，子元素可以收到该事件并且触发后会冒泡上来
    子元素也会触发该事件
mouseenter mouseleave 只执行监听当前元素的进入和离开事件，对子元素不冒泡

e  就是鼠标点击，系统抛发的鼠标事件
e.type  鼠标事件类型
e.altkey  按着alt点击
e.shiftkey 按着shift点击
e.metakey  按着command点击 苹果
e.ctrlkey  按着ctrl点击
e.cancelBubble  设置为true取消冒泡，e.stopPropagation()兼容写法

主要用于  mousedown mouseup
e.button: 0
e.buttons: 0  监听的键比较多
e.which:0

e.target  目标对象
e.srcElement  目标对象
e.currentTarget 监听对象

坐标 鼠标坐标

兼容写法，相等     鼠标相对视口左上角坐标
clientX: 242
clientY: 80
x: 242
y: 80

如果定位时与offsetX，offsetY相同，如果非定位时相对定位父元素，如果父元素没有定位就继续向上直到body
layerX: 34
layerY: 28

相对目标元素（e.target）的左上角坐标
offsetX: 34
offsetY: 29

针对mousemove 事件 针对上一次移动的距离 正数向下和向右，负数向上和向左
movementX: 0
movementY: 0

绝对于页面左上角的距离
pageX: 242
pageY: 236


相对于屏幕左上角的距离
screenX: 242
screenY: 191

聚焦输入事件 FocusEvent

e.relatedTarget  上一次聚焦的对象
 所有表单元素，超链接  鼠标点击聚焦，tab键切换聚焦

不能委托给父元素做事件
focus  聚焦  
blur   失焦

表单做聚焦事件使用,表单元素可以委托给父元素的事件方式
focusin
focusout

input 输入时处理

e.data: "a"  本次输入的字符
e.inputType: "insertCompositionText"  输入的类型
e.isComposing  是否开启了输入法

节流
先执行一次函数后，在一定的时间内不再执行这个函数，时间过去后再次执行
防抖
进入后延迟一定时间后再执行这个函数

  // 节流
        var input=document.querySelector("input");
        var ids;
        input.addEventListener("input",inputHandler);
        
        function inputHandler(e){
            if(ids) return;
          ids=setTimeout(function(){
            clearTimeout(ids);
            ids=undefined;
            console.log(input.value);
           },500);
        }

按键事件

e.code: "KeyZ"
e.key: "z"
e.keyCode: 90 键码
e.which: 90 键码

keydown 按下键
keyup 松开键

滚轮事件

其他浏览器  mousewheel
deltaX: -0
   deltaY: -5
deltaZ: 0
detail: 0
wheelDelta: 15
wheelDeltaX: 0
wheelDeltaY: 15


火狐   DOMMouseScroll

   detail: 1