Javascript事件基础知识梳理

浏览器的兼容性还有坑未填， 别问，问就想哭 还没掌握完全…

什么是事件

用户与web页面进行某些行为交互式，解释器创建响应event对象来描述事件信息。

常用的事件：

• 用户点击页面上的某项内容事件
• 鼠标经过特定的元素
• 用户按下键盘上的某个按键
• 用户滚动窗口或改变窗口大小
• 页面元素加载完成或者加载失败

1、事件句柄：

 又叫事件监听函数/事件处理函数，指用于响应某个触发事件而调用的函数。

如下图所示：

	<button id="btn">点击我</button>
	<script type = "text/javascript" >
		var btn = document.getElementById("btn");
		var clickme = function(){                    // 响应事件句柄的函数
			alert("已经被点击");  
		}
		btn.addEventListerent('click',clickme);     //绑定click事件， clickme为事件句柄
	</script>

2、事件定义三种方式：

• 在html标签中定义

<button onclick="alert('hello')">按钮</button>

ps: html中写js,强耦合，不利于复用。

• DOM 0级事件

	<button id="btn">点击我</button>
	<script type = "text/javascript">
		var btn = document.getElementById("btn");
		var btnFun = function(){
			alert("DOM0级事件绑定方式")
		}
		btn.onclick = btnFun;
	</script>

ps:事件对象的属性添加绑定，松耦合，有且仅有一个事件。

• DOM 2级事件

	<button id="btn2">点击我</button>
	<script type = "text/javascript">
		var btn2 = document.getElementById("btn2");
		var btnFun = function(){
			alert("DOM2级事件绑定方式");
		}
		btn2.addEventListener('click',btnTwoFun,false); 
	</script>

ps : 松耦合，可以绑定多个事件，可以进行事件捕获和事件冒泡。

事件流

• 添加事件:
  语法：element.addEventListener(event, function, useCapture)
  功能：向指定的元素添加事件句柄。
  参数：
  event: 必须。字符串，指定事件名。
  function: 必须。指定要事件出发时执行的函数。
  useCapture: 可选。布尔值，指定时间是否在捕获或冒泡阶段执行。

• 移除事件：
  语法：element.removeEventListener(event, function, useCapture)
  功能：移除addEventListener()方法添加的事件句柄。
  参数：
  event: 必须。字符串，要移除的事件名。
  function: 必须。指定要移除的函数。
  useCapture: 可选。布尔值，指定时间是否在捕获或冒泡阶段执行。

• IE8级以下浏览器事件流 添加事件：
  语法： element.attachEvent(event, function)
  功能：向指定的元素添加事件句柄。
  参数：
  event: 必须。字符串，指定事件名,必须加 " on " 前缀。
  function: 必须。指定要事件出发时执行的函数

• IE8级以下浏览器事件流 移除事件：
  语法： element.detachEvent(event, function)
  功能：移除detachEvent()方法添加的事件句柄。
  参数：
  event: 必须。字符串，要移除的事件名。
  function: 必须。指定要移除的函数。

跨浏览器的事件处理程序

—— IE8以下的浏览器真的不能永久停用么了
—— 不， 小白的世界只想要 chrome 和IE9+ … <(－︿－)>

event对象的常用属性及方法

type：事件的类型；

srcElement/target: 事件源，就是发生事件的元素；

cancelBubble: 布尔属性，设为true的时候，将停止事件的进一步起泡到包容层次（父级）元素;(e.cancelBubble = true; 相当于e.stopPropagation();）

returnValue: 布尔属性，设为false的时候可以组织浏览器执行默认事件动作；（e.returnValue = false;相当于 e.preventDefault();）
clientX/clientY: 事件发生时，鼠标相对于浏览器窗口可视文档区域左上角的位置；

offsetX,offsetY：事件发生时，鼠标相对于事件源元素可视文档区域左上角的位置；

常用的事件类型

鼠标事件

onclick 当用户点击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。

键盘事件

onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。

框架/对象事件

onabort 图像的加载被中断。 ( )
onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发
onerror 在加载文档或图像时发生错误。 ( , 和 )
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
onload 一张页面或一幅图像完成加载。
onpageshow 该事件在用户访问页面时触发
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
onresize 窗口或框架被重新调整大小。
onscroll 当文档被滚动时发生的事件。
onunload 用户退出页面。 ( 和 )

表单事件

onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( , , , 和 )
onfocus 元素获取焦点时触发
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
oninput 元素获取用户输入时触发
onreset 表单重置时触发
onsearch 用户向搜索域输入文本时触发 ( <input=“search”>)
onselect 用户选取文本时触发 ( 和 )
onsubmit 表单提交时触发

拖动事件

ondrag 该事件在元素正在拖动时触发
ondragend 该事件在用户完成元素的拖动时触发
ondragenter 该事件在拖动的元素进入放置目标时触发
ondragleave 该事件在拖动元素离开放置目标时触发
ondragover 该事件在拖动元素在放置目标上时触发
ondragstart 该事件在用户开始拖动元素时触发
ondrop 该事件在拖动元素放置在目标区域时触发

多媒体事件

onabort 事件在视频/音频（audio/video）终止加载时触发。
oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。
onemptied 当期播放列表为空时触发
onended 事件在视频/音频（audio/video）播放结束时触发。
onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。
onloadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。
onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。
onpause 事件在视频/音频（audio/video）暂停时触发。
onplay 事件在视频/音频（audio/video）开始播放时触发。
onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。
onratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。
onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
onseeking 事件在用户开始重新定位视频/音频（audio/video）时触发。
onstalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发。
onsuspend 事件在浏览器读取媒体数据中止时触发。
ontimeupdate 事件在当前的播放位置发送改变时触发。
onvolumechange 事件在音量发生改变时触发。
onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。

…兼容性的坑先攒，不填变穷…