常用的事件行为 （二）

	 * 事件是元素天生自带的默认操作行为
	 *   =>不论我们是否给其绑定了方法，当我们操作的时候，也会把对应的事件触发 
	 * 事件绑定是给元素的某个行为绑定一个方法
	 *   =>目的是当事件行为触发的时候，可以做一些事情
	 * 

常用的事件行为

[鼠标事件]

	 *     click 点击（移动端click被识别为单击）
	 *     dblclick 双击
	 *     mousedown 鼠标按下
	 *     mouseup  鼠标抬起
	 *     mousemove 鼠标移动
	 *     mouseover 鼠标滑过
	 *     mouseout  鼠标滑出
	 *     mouseenter 鼠标进入
	 *     mouseleave 鼠标离开
	 *     mousewhell 鼠标滚轮滚动

[键盘事件]

	 *     keydown 按下某个键
	 *     keyup 抬起某个键
	 *     keypress 除Shift/Fn/CapsLock键以外，其它键按住（连续触发）

[移动端手指事件]

	 *     单手指事件模型 Touch
	 *        touchstart 手指按下
	 *        touchmove 手指移动
	 *        touchend  手指松开
	 *        touchcancel 操作取消（一般应用于非正常状态下操作结束）
	 *     多手指事件模型 Gesture
	 *        gesturestart
	 *        gesturechange / gestureupdate
	 *        gestureend
	 *        gesturecancel

[表单元素常用事件]

	 *     focus 获取焦点
	 *     blur 失去焦点
	 *     change 内容改变

[音视频常用事件]

	 *     canplay  可以播放（资源没有加载完，播放中可能会卡顿）
	 *     canplaythrough 可以播放（资源已经加载完，播放中不会卡顿）
	 *     play 开始播放
	 *     playing 播放中
	 *     pause 暂停播放

[其它常用事件]

	 *     load 资源加载完
	 *     unload 资源卸载
	 *     beforeunload 当前页面关闭之前
	 *     error 资源加载失败
	 *     scroll 滚动事件
	 *     readystatechange AJAX请求状态改变事件
	 *     contextmenu 鼠标右键触发
	 *     ......
	 * https://developer.mozilla.org/zh-CN/docs/Web/Events
	 * 或者查看元素的属性（属性中onxxx就是元素拥有的事件行为）

DOM0事件绑定 VS DOM2事件绑定

	 *   [DOM0]
	 *     元素.on事件行为=function(){}
	 *   [DOM2]
	 *     元素.addEventListener(事件行为,function(){},true/false)
	 *     IE6~8中：元素.attachEvent('on事件行为',function(){})

DOM0事件绑定的原理：给元素的私有属性赋值，当事件触发，浏览器会帮我们把赋的值执行，但是这样也导致 “只能给当前元素某一个事件行为绑定一个方法” *
/* box.onclick = function () {
console.log(‘哈哈哈~~’);
}
box.onclick = function () {
console.log(‘呵呵呵~~’);
} */

	/* box.onclick = function () {
		console.log('哈哈哈~~');
		//=>移除事件绑定：DOM0直接赋值为null即可
		box.onclick = null;
	} */

DOM2事件绑定的原理：

基于原型链查找机制，找到EventTarget.prototype上的方法并且执行，此方法执行，会把给当前元素某个事件行为绑定的所有方法，存放到浏览器默认的事件池中（绑定几个方法，会向事件池存储几个），当事件行为触发，会把事件池中存储的对应方法，依次按照顺序执行 “给当前元素某一个事件行为绑定多个不同方法”
/* box.addEventListener(‘click’, function () {
console.log(‘哈哈哈~~’);
}, false);
box.addEventListener(‘click’, function () {
console.log(‘呵呵呵~~’);
}, false); */

=>DOM2事件绑定的时候，我们一般都采用实名函数
=>目的：这样可以基于实名函数去移除事件绑定
/* function fn() {
console.log(‘哈哈哈~~’);
//=>移除事件绑定：从事件池中移除，所以需要指定好事件类型、方法等信息（要和绑定的时候一样才可以移除）
box.removeEventListener(‘click’, fn, false);
}
box.addEventListener(‘click’, fn, false); */

	/* function fn1(){ console.log(1); }
	function fn2(){ console.log(2); }
	function fn3(){ console.log(3); }
	box.addEventListener('click', fn2, false); 
	box.addEventListener('click', fn3, false); 
	box.addEventListener('click', fn1, false); 
	//=>基于addEventListener向事件池增加方法，存在去重的机制 “同一个元素，同一个事件类型，在事件池中只能存储一遍这个方法，不能重复存储”
	box.addEventListener('click', fn1, false); 
	box.addEventListener('mouseover', fn1, false);  */

	/* window.oncontextmenu = function (ev) {
		alert("哇咔咔~~");
	} */

	/* DOM0和DOM2可以混在一起用：执行的顺序以绑定的顺序为主 */
	/* box.addEventListener('click', function () {
		console.log('哔咔哔咔~~');
	});
	box.onclick = function () {
		console.log('哇咔咔~~');
	}
	box.addEventListener('click', function () {
		console.log('call~~');
	}); */

	/* DOM0中能做事件绑定的事件行为，DOM2都支持；DOM2里面一些事件，DOM0不一定能处理绑定，例如：transitionend、DOMContentLoaded... */

	/* JQ中的事件绑定采用的都是DOM2事件绑定，例如：on/off/one */