鼠标事件
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