js中的事件

事件

事件流
冒泡
捕获
阻止冒泡

    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 最好
控制事件冒泡捕获
可以取消绑定
匿名函数式 复用性低