九，JavaScript的事件

一，复习事件

1.鼠标类

click 单击	dblclick 双击	contextmenu 右击
mouseover 移入	mouseout 移出	mousewheel 滑轮滚动
mouseenter 移入	mouseleave 移出	mousemove 鼠标移动
mousedown 鼠标按下	mouseup 鼠标松开	<-- 只要鼠标按键按下松开都能触发

2.键盘类

键盘按下	键盘抬起	敲击键盘
keydown	keyup	keypress
不松开一直触发	{常用}	相当于（按下）

3.表单类

获取焦点	focus
失去焦点	blur
下拉框选项发生改变的事件	change
表单提交	submi
submit必须给form标签绑定事件	当表单域中的提交按钮(input的type为submit，或button的type为submit)被点击后或敲回车后触发
时刻监听文本框和文本域中内容的事件	input

4.window类

加载事件	load	当网页中所有资源都运行完成才开始执行
滚动条滚动事件	scroll	当滚动条滚动了就会触发的事件
窗口大小改变事件	resize	当窗口大小改变了就会触发的事件

二，事件流

1。概念：事件从开始发生到执行结束的整个流程

2.流程

• 捕获阶段（找到目标标签）：当点击一个小div时，系统会在整个文档中先找到当前触发事件的这个标签
  • 由外向内找
• 目标阶段 ：执行目标元素对应的事件函数
• 冒泡阶段：当目标元素的事件执行后，要经历外面的标签在出去
• 默认情况下，目标元素的父标签或其他祖宗标签会在冒泡阶段执行

三，事件绑定

1.事件监听器/监听器

	标签.addEventListener(事件类型，事件处理程序，是否在捕获阶段执行 【第三个参数为 可选项 - 默认是false】)

1. 可以让事件在捕获阶段执行（非目标元素事件）
2. 可以让痛类型的事件绑定多次并不会覆盖

2.事件解绑

1. 事件一旦绑定了，说明这个事件会一直保留在内存中
2. 因为某些情况下，事件在执行完成以后，我们不需要了，需要将事件从内存中删除
3. 解绑事件的方法

	1.当使用on类型绑定事件，直接将on类型赋值为null就是解绑
	2.标签.removeEventListener(事件类型，曾经绑定的函数)
	注意：如果绑定的是匿名函数，这个事件就解绑不了的，必须使用有名字的函数

四，事件对象

1.概念

系统在调用事件函数传入了一个实参对象，这个对象就交事件对象

2.作用

记录了很对跟当事件相关的信息，鼠标按键信息，记录鼠标在浏览器上的那个位置等

3.获取方式

1. 获取一个形参来接收
2. 通过window.event来接收 === event

4.绑定

3. 给box对象的onclick属性赋值了一个函数
4. 对象中如果键对应的值是一个函数的话，将这个键值对叫做对象的方法
5. 对象的方法调用语法：对象.键()
6. 比如 box.onclick()

5.方法

1. 阻止事件冒泡： 事件对象.cancelBubble = true

2. 获取到事件类型：事件对象.type 代表当前对象类型
   

3. 获取鼠标按键信息： 事件对象.button 代表当前鼠标按键信息 0左键 1滑轮 2右键

4. 获取键盘按键信息： 事件对象.keyCode - 键盘按键码

   一般情况下，每个字母和数字符号的按键码大致会遵循阿斯克码，但是每台计算机可能结果会出现点误差，

• 在获取键盘码时，火狐浏览器有兼容问题

• var keyCode = e.keyCode || e.which 【短路运算获取】

• 键盘码：数字额字母他们的按键码就是阿斯克码，

  • 回车键的按键码为 13
  • 空格的阿斯克码为 32
  • 左上右下的按键码为 37 38 39 40

• 组合键：有些键单独是没有什么作用的，通常会配合其他键才能实现功能：

  • 事件对象中提供了几个属性用于判断是否按住了这个几个组合键
    • ctrl - 事件对象,ctrlKey
    • alt - 事件对象.altkey
    • shift - 事件对象.shiftkey
  • 返回值为布尔值 代表是否按住哪个键

	 // 判断是否按住ctrl+z
	 if(e.ctrlkey && string.fromCharCode(e.keyCode).toLowerCase()=='z')
	 		console.log('是')
	 else{
	 		console.log('不是')
	 	}

5. 获取鼠标点击的位置

 	1.获取鼠标  当前事件源上  点击的位置
 		事件对象.offsetX
 		事件对象.offsetY
 	2.获取鼠标在  当前浏览器区域中 的位置
 		事件对象.clientX
 		事件对象.clientY
	3，获取鼠标在  当前页面中  的位置
		事件对象.pageX
		事件对象.pageY

6. 阻止默认行为

	默认行为是系统自带的功能
	有些标签不需要使用js事件来操作，自动就能实现某些功能，例如a标签，form，鼠标右击
	方法
	1.事件对象.returnValue = false
	2.在事件函数最下添加 return false
	3.如果有链接，就将链接改为 javascript;

7. 获取具体的更精准的目标元素：事件对象.target

五，事件委托

1. 概念 利用事件冒泡原理，让父标签代表子标签处理事件
2. 给父标签绑定事件，在父标签事件中，通过事件对象.target获取到当前触发事件的目标子标签，处理这个行为
3. 原理：利用事件冒泡
4. 好处
   a.提高绑定的效率
   b.动态添加的子标签也能具备事件

六，数组塌陷

	//数组塌陷演示
	for (var i=0;i<arr.length,i++){
		arr.splice(i,1)
	console.log(arr); // [2,4,6]
	 
	 // 倒着删除
	 for(var i=arr.length-1;i>=0;!--)
	 	arr.splice(i,1)
	console.log(arr)
	}
	// 每次删除i--
	for(var i=0;i<arr.length;i++)
		{
		arr,splice(0,1)
		i--}
	console.log(arr)

	// 用while删除
	while(arr.length{
		arr.splice(0,1)	
	}
	console.log(arr)