事件流
冒泡
捕获
阻止冒泡
e.stopPropagation()
阻止默认事件
e.preventDefault()
常用事件
键盘
onkeydown
按下
onkeyup
弹起
onkeypress
键盘按下
窗口
onscroll
滚动
onresize
调整大小
onload
加载
onunload
卸载
鼠标
右键菜单
oncontextMenu
鼠标滚动
onmousewheel
wheelDelta
向下 -150
向上 150
鼠标拖放
ondragstart
开始拖动
ondragover
拖放在元素上面
ondrop
拖放松开
鼠标单击 onclick
双击 ondblclick
鼠标经过 onmouseover
鼠标离开 onmouseout
表单
onchange表单发生改变
onblur 失去焦点
onfocus 获取焦点
onsubmit 提交
事件参数
target 目标
srcElement事件元素
x,y
pageX
相对于页面的偏移
clientX
相对于视口的偏移
offsetX
相对于当前元素的偏移
wheelDelta
鼠标滚动值(判断方向)
keyCode键盘值
是哪个键被按下了
stopPropagation()
阻止事件冒泡
preventDefault()
阻止默认事件
拖动事件的参数
dataTransfer数据传递器
setData(k,v)
设置传输数据
getData(k)
获取传输数据
事件的绑定
1 html标签 调用
< div onclick="func()">
2.script DOM 1 级
el.onclick=function(e){} 匿名
el.onclick=fun; 函数名式
function fun(){}
3.script DOM2
el.addEventListener("click",function(){})
el.addEventListener("click",fun);
function fun(){}
区别
标签调用 可操作性小, 方便理解
DOM1 后面的调用与前面代码一致,会覆盖前面
DOM2 最好
控制事件冒泡捕获
可以取消绑定
匿名函数式 复用性低