事件

事件

• 事件流

1. 冒泡

2. 捕获

• 阻止冒泡

   	e.stopPropagation()
  

• 阻止默认事件

   	e.preventDefault()
  

常用事件

1. 键盘

按下

		onkeydown

弹起

		onkeyup

键盘按下

		onkeypress

2. 滚动

窗口

		onscroll

调整大小

		onresize

加载

		onload

卸载

		onunload

3. 鼠标

• 右键菜单

oncontextMenu

• 鼠标滚动

• onmousewheel
  wheelDelta
  向下 -150
  向上 150

• 鼠标拖放

   		ondragstart
  

• 开始拖动

   		ondragover
  

• 拖放在元素上面

   		ondrop
  

• 拖放松开

   	鼠标单击 onclick
   	双击 ondblclick
   	鼠标经过 onmouseover
   	鼠标离开 onmouseout
  

• 表单

   	onchange表单发生改变
   	onblur 失去焦点
   	onfocus 获取焦点
   	onsubmit 提交
  

事件参数

	target 目标
	srcElement事件元素
	x,y
		pageX

1. 相对于页面的偏移

   	clientX
   

2. 相对于视口的偏移

   	offsetX
   

3. 相对于当前元素的偏移

   wheelDelta
   

4. 鼠标滚动值（判断方向）

   keyCode键盘值是哪个键被按下了
   stopPropagation()
   

5. 阻止事件冒泡

   preventDefault（）
   

6. 阻止默认事件

   拖动事件的参数
   	dataTransfer数据传递器
   		setData(k,v)
   

7. 设置传输数据

   		getData(k)
   

获取传输数据

事件的绑定

• 1 html标签 调用
  < div οnclick=“func()”>

• 2.script DOM 1 级
  el.οnclick=function(e){} 匿名
  el.οnclick=fun; 函数名式
  function fun(){}*

• 3.script DOM2
  el.addEventListener(“click”,function(){})
  el.addEventListener(“click”,fun);
  function fun(){}
  区别
  标签调用 可操作性小， 方便理解
  DOM1 后面的调用与前面代码一致，会覆盖前面
  DOM2 最好
  控制事件冒泡捕获
  可以取消绑定
  匿名函数式 复用性低