Javascript学习笔记：JS事件

1.常见事件

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

2.事件句柄

事件句柄，又称事件处理函数、事件监听函数。

<div id='btn'>点击我</div>
<script>
	var btn = document.getElementById("btn");
	btn.addEventListener('click',function(){
		//处理语句
	});
</script>

3.事件定义

为特定事件定义监听函数有三种方式：

• 1.直接在HTML中定义元素的事件相关属性

<button onclick="alert('Fuck!')">点击我呦</button>

缺点：强耦合（把JS和HTML写在了一起），不利于代码复用。

• 2.DOM0级事件
  参考另一篇博文：https://blog.csdn.net/qq_18404993/article/details/104313872
  缺点：元素有且仅能绑定一个事件，若绑定了多个，默认会执行最后一次绑定的事件。
• 3.DOM2级事件
  高级事件处理方式，一个事件可以绑定多个监听函数。

<div id='btn'>点击我</div>
<script>
	var btn = document.getElementById("btn");
	btn.addEventListener('click',function(){
		alert("click");
	},false);
	btn.addEventListener('click',function(){
		alert("click2");
	},false);
</script>

4.DOM事件流

移除事件：removeEventListener()

var btn = document.getElementById("btn");
var show = function(){
	alert("click");
}
btn.addEventListener('click',show,false);
//解绑事件
btn.removeEventListener('click',show)

注意 一定要保证addxxx和removexxx里面的参数一致，才能解绑成功

5.IE事件流（IE事件处理程序）

IE8以及以下：
添加事件：attchEvent()
移除事件：deattchEvent()

DOM0级事件绑定：兼容所有浏览器
DOM2级事件绑定：Chrome、Firefox、IE9+等
attchEvent：IE8-

6.跨浏览器事件处理程序

写一个可以通用的事件绑定。

7.事件冒泡和事件捕获

事件周期：解释器创建一个event对象后，会按如下过程将其在html元素间进行传播

• 第一阶段：事件捕获，事件对象沿DOM树向下传播
• 第二阶段：目标触发，运行事件监听函数
• 第三阶段：事件冒泡，事件沿DOM树向上传播
  

<script>
	var parent = document.getElementById("parent");
	var child = document.getElementById("child");

	parent.addEventListener("click",function(e){
		alert("parent事件被触发"+this.id);
	})
	child.addEventListener("click",function(e){
		alert("child事件被触发"+this.id);
	})
</script>

结果：先触发child事件，再触发parent事件。
事件冒泡：以直系亲属树结构向上冒泡，子-->父-->爷，addEventListener()第三个参数默认为false，表示事件冒泡。

<script>
	var parent = document.getElementById("parent");
	var child = document.getElementById("child");

	parent.addEventListener("click",function(e){
		alert("parent事件被触发"+this.id);
	},true)
	child.addEventListener("click",function(e){
		alert("child事件被触发"+this.id);
	},true)
</script>

结果：先触发parent事件，再触发child事件。
事件捕获：以直系亲属树结构向下冒泡，爷-->父-->子，addEventListener()第三个参数默认为true，表示事件捕获。
大部分情况用事件冒泡

8.事件委托

原理：事件冒泡
给ul绑定事件，点击li，利用事件冒泡，会触发ul绑定的事件，可以用target获取具体点击的是哪个li，这种方法称作事件委托，能减少事件绑定的次数。

9.event对象常用属性和方法

type：事件的类型
srcElement(IE8-)/target：事件源，currentTarget指事件绑定的实际对象
cancelBubble：布尔属性，设为true时将停止事件进一步起泡到包容层次的元素，e.cancelBubble==true(IE8-)相当于e.stopPropagation()
renturnValue：布尔属性，设为false时可以阻止浏览器执行默认事件动作，e.returnValue=false(IE8-)相当于e.preventDefault()，例如a标签使用该属性的false值，会阻止链接跳转。
clientY：浏览器顶部底边到鼠标点击位置的垂直距离。
pageY：cilentY+滚动轴的距离
screenY：屏幕的顶部到鼠标点击位置的垂直距离。

10.event对象浏览器兼容写法

11.常见事件类型

11.1 UI事件类型

load：页面加载完成后在window上面触发
可用于图片预加载（提前把图片缓存到内存中）

var image = new Image();
EventUtil.addHandler(image,"load",function(event){
	alert("Image load!");
});
image.src="smile.gif";

可用于JS和CSS动态加载

var script = document.createElement("script");
EventUtil.addHandler(script,"load",function(event){
	alert("js load!");
});
script.src="jquery.js";
document.body.appendChild(script);

unload：用户从一个页面切换到另一个页面
resize：窗口大小发生变化时触发
scroll：页面滚动时触发

11.2 焦点事件

blur：input元素失去焦点时触发
focus：获取焦点时，不支持冒泡
focusin：同上，支持冒泡
focusout：同blur
DOMFocusIn：元素获取焦点时触发（Opera）
DOMFocusOut：元素失去焦点时触发（Opera）

11.3 鼠标事件

click：点击
doublecilck：双击
mousedown：鼠标按下
mouseup：鼠标松开
mousemove：鼠标在元素上移动
mouseout：鼠标离开元素（包括子元素）
mouseover：鼠标进入目标元素（包括子元素）
mouseenter：鼠标进入目标元素，只能进入目标元素时才触发（若目标元素内部有其他元素，鼠标悬停子元素时不触发，下同）
mouseleave：鼠标离开目标元素，只能离开目标元素时才触发
一些属性：
event.shiftkey：shift键被按下
event.ctrlkey：ctrl键被按下
event.altkey：alt键被按下
鼠标按下时的属性：
event.button：0–鼠标左键，1–鼠标中键，2–鼠标右键

11.4 键盘事件

keydown：键码，按下任意键触发，配合event.keycode使用
keyup：释放任意键触发，配合event.keycode使用
keypress：键码，按下字符键触发，配合event.charCode使用，获取ASCII码
textInput：输入框，配合event.data使用

11.5 文档事件

DOMNodeRemoved：绑定元素中的任意元素被删除时触发。
DOMSubtreeModified：绑定元素中的元素树发生任何改变是触发。
DOMNodeRemovedFromDocument：从文档中移除之前被触发。
DOMNodeInserted：绑定元素中添加了任意元素时被触发。
DOMNodeInsertedIntoDocument：从文档中添加之前被触发

11.6 HTML5新增事件

DOMContentLoaded：在DOM树之后就会触发，不理会图像、js、css或其他资源是否已经加载，速度一定快于load事件。
hashchange：只能给window添加，#号后面的值发生变化时触发

11.7 移动端常用事件

touchstart：手指触摸屏幕时触发
touchmove：手指在屏幕上滑动时触发
touchend：手指离开屏幕
touchcancel：当系统停止跟着触摸时触发
一些event的属性：
event.touches：当前触摸屏幕的触摸点数组
event.changedTouches：数组中只包含引起事件的触摸点信息
event.targetTouches：只包含放在事件对象上的触摸点信息