事件
鼠标事件
click 鼠标单击
dblclick 鼠标双击
mouseover 鼠标经过触发
mouseout 鼠标离开触发
mousemove 鼠标移动触发
mouseup 鼠标弹起触发
mousedown 鼠标按下触发(任何一个键)
mouseenter 鼠标移入
mouseleave 鼠标移出
mousewheel 滚轮事件
contextmenu 右键(配合方法preventDefault()实现右键菜单不显示)
注:mouseenter/mouseleave不会触发冒泡,mouseover/mouseout经过自身和子盒子都会触发
selectstart 鼠标选中(配合方法实现禁止鼠标选中)
键盘事件
keyup 某个键盘按键被松开时触发
keydown 某个键盘按键被按下时触发
keypress 某个键盘按键被按下时触发
注:
onkeypress不识别功能键,比如左右箭头,shift
三个事件的执行顺序 keydown - keypress - keyup
触摸事件
touchstart 触摸开始
touchmove 触摸移动
touchend 触摸结束
表单事件
focus 获得鼠标焦点触发
blur 失去焦点触发
change 改变
input 输入内容改变(input和textarea有效)
submit 提交
reset 重置
监听事件
transitionend 监听过渡完成事件
注册事件
1.传统方式on开头的事件
element.οnclick=function(){}
注:注册事件有唯一性
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数
行内使用on注册要加()调用<button onclick="fn()"></button>
2.eventTarget.addEventListener(type,listener[,useCapture])事件监听
eventTarget.addEventListener()方法将指定的监听器注册到目标对象上,当该对象触发指定的事件,就会执行事件处理函数
type:事件类型字符串 比如click、mouseover,不能带on
listener:事件处理函数,事件发生时,会调用该监听函数(调用函数不需要加小括号,可以为匿名函数,如果要删除事件则不能使用匿名函数)
useCapture:可选参数,是一个布尔值,默认是false
为true时DOM事件流处于捕获阶段,从document > html > body >div… 执行
为false时DOM事件流处于冒泡阶段,从…div>body>html>document 执行
注:同一个元素同一个事件可以添加多个侦听器(事件处理程序)
3. eventTarget.attachEvent(eventNameWithOn,callback)事件监听(ie9兼容)
eventTarget.attachEvent()方法将指定的监听器注册到目标对象上,当该对象出发指定的事件时,指定的回调函数就会被执行
eventNameWithOn:事件类型字符串,比如onclick、onmouseover 要带on
callback:事件处理函数,当目标触发事件时回调函数被调用
4.手动调用点击事件
on绑定
arrow_r.event()
eg:
绑定对象.click()
侦听器绑定
var evt = new Event('click') //固定语法
绑定对象.dispathEvent(evt)
删除事件
1.传统注册方式
eventTarget.οnclick=null;
2.事件监听方式
eventTarget.removeEventListener(type,listener);
type:需要删除的事件类型
listener:需要删除的函数名称
事件对象
event事件对象是写到侦听函数中的形参,不需要传递参数,是事件的一系列相关数据的集合,跟事件相关(兼容性window.event)
兼容性写法 e=e || window.event
事件对象的常见属性和方法
this 返回绑定事件的对象
e.target 返回触发事件的对象
e.srcElement 返回触发对象(ie6-8兼容)
e.type 返回事件的类型
e.preventDefault() 该方法阻止默认事件
e.stopPropagation() 该方法阻止冒泡
e.cancelBubble 阻止冒泡(ie6-8兼容)
e.returnValue 阻止默认事件 (ie6-8兼容)
注:
currentTarget与this类似 有兼容性问题
return false 阻止默认行为 没有兼容性问题 但后面的代码不会被执行
鼠标事件对象(MouseEvent)
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标
e.pageY 返回鼠标相对于文档页面的Y坐标
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标
e.offsetX 鼠标相对于事件源左上角X轴的坐标
e.offsetY 鼠标相对于事件源左上角Y轴的坐标
事件对象.button
获取点击信息
0
为鼠标左键,2
为鼠标右键,1
滚轮
键盘事件对象(KeyboardEvent)
keyCode 返回该键的ASCII码
常见的键盘码(了解)
8: 删除键(delete)
9: 制表符(tab)
13: 回车键(ebter)
16: 上档键(shift)
17: ctrl 键
18: alt 键
27: 取消键(esc)
32: 空格键(space)
组合键
事件对象.shiftKey 是否按住shift键 返回布尔值
事件对象.ctrlKey 是否按住ctrl键 返回布尔值
事件对象.altKey 是否按住alt键 返回布尔值
注:
onkeydown 和 onkeyup 不区分字母大小写,onkeypress区分大小写
当使用 keydown 和 keypress时先触发事件在输入键盘按键
keyup事件触发时,键盘按键已经输入完
触摸事件对象(TouchEvent)
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前DOM元素上的手指的一个列表(伪数组)
changedTouches 手指状态发生变化的列表,从无到有,从有到无的变化
注:拖动元素需要当前手指的坐标,targetTouches[0]里的pageX和pageY
手指移动也会触发滚动屏幕所以要阻止默认屏幕滚动 e.preventDefault()
事件委托
不给每个子节点单独设置设置事件监听,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
通过e.target获取点击元素再通过tagname判断
eg:ul ==> li
ul.onclick=function(e){
if(e.target.tagName === 'li'){
//code
}
}