JS入门到精通详解（8）

事件绑定方式

什么是事件

• 一个事件由什么东西组成

• 触发谁的事件：事件源

• 触发什么事件：事件类型

• 触发以后做什么：事件处理函数

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数

• 我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log('你点击了 div')
}

• 当我们点击 div 的时候，就会执行事件处理函数内部的代码

• 每点击一次，就会执行一次事件处理函数

DOM0级 事件

1. 常用事件

1. onblur : 失焦事件

2. onfocus : 得焦事件

3. onchange : 内容改变事件

2. 鼠标常用事件

1. onclick : 点击事件

2. ondblclick : 双击事件

3. onmousedown : 鼠标按下事件

4. onmouseup : 鼠标抬起事件

5. onmouseenter : 鼠标移入事件（会自动阻止事件冒泡）

6. onmouseleave : 鼠标移出事件

7. onmouseover : 鼠标移入事件

8. onmouseout ： 鼠标移出事件

9. onmousemove ： 鼠标移动事件

3. 键盘常用事件

1. onkeydown : 键盘按下

2. onkeyup : 键盘抬起

3. onkeypress : 键盘按过

4. 其它事件

1. onload : 加载成功事件

2. error : 加载失败事件

3. resize : 大小改变事件

DOM0级事件绑定

ele.onclick = function(){}

DOM2级 事件绑定

标准 浏览器： ele.addEventListener('click',function(){},false)
IE 浏览器 ：ele.attachEvent('onclick',function(){})

//添加事件监听器
//标准浏览器
//第一个参数：事件类型 （名词）
//第二个参数：事件处理程序
//第三个参数：是否进行事件捕获？ false(冒泡-默认值) true(捕获)
// o_btn.addEventListener('click',fn1,false);
// o_btn.addEventListener('click',fn2,false);
// o_btn.addEventListener('click',fn3,false);
//IE浏览器
// o_btn.attachEvent('onclick',fn1);
// o_btn.attachEvent('onclick',fn2);
// o_btn.attachEvent('onclick',fn3);
//兼容
function addEventListener(obj,type,fn,bool){
	//初始化bool参数
	bool = bool || false;
	if(obj.addEventListener){
		obj.addEventListener(type,fn,bool);
	}else if(obj.attachEvent){
		obj.attachEvent('on' + type,fn);
	}
}

事件解绑方式

DOM0级事件解绑

ele.onclick = null;

DOM2级事件解绑

标准 浏览器： ele.removeEventListener('click',function(){},false)

IE 浏览器 ：ele.detachEvent('onclick',function(){})

//移除事件监听
//标准浏览器
// o_btn.removeEventListener('click',fn2,false);
//IE浏览器
// o_btn.detachEvent('onclick',fn2);
//兼容
function removeEventListener(obj,type,fn,bool){
	//初始化bool参数
	bool = bool || false;
	if(obj.removeEventListener){
		obj.removeEventListener(type,fn,bool);
	}else if(obj.detachEvent){
		obj.detachEvent('on' + type,fn);
	}
}

事件对象的认识

什么是事件对象？（类似于飞机上的黑匣子、汽车上的行车记录仪、教室中的摄像头)

当绑定事件的对象，在触发事件时，所发生的事情记录在一个地方，而这个地方称为事件对象。

如何获取事件对象？

1. 标准浏览器获取事件对象的方式： 触发事件后，会自动给事件处理程序传递一个参数，这个参数就是事件对象。

2. IE浏览器获取事件对象的方式： window.event

3. 兼容：

function getEvent(){
	return arguments[0] || window.event;
}

事件对象内鼠标相关信息

鼠标的相对坐标值：（鼠标相对于所在对象上的坐标值）

1. event.offsetX / event.offsetY

鼠标的可视区坐标值：（当前鼠标触发点距离当前窗口左上角的X/Y坐标）

1. event.clientX / event.clientY

鼠标的绝对坐标值：（当前鼠标触发点距离BODY左上角的X/Y坐标(IE9以下没有这两个属性)

1. event.pageX / event.pageY

//兼容处理：
event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)

事件对象内键盘相关信息

1. onkeydown/onkeyup : event.keyCode

监听整个键盘，其中字母键只返回大写的编码值。

2. onkeypress : event.keyCode || event.charCode || event.which

监听编辑键区，字母键返回大小的编码值。
低版本浏览器中有可能监听功能键区、回车键出现过10
兼容：

//7. 获取键盘编码值的兼容
function getKeyCode(evt){
	var e = evt || window.event;
	return e.keyCode || e.charCode || e.which;
}

altKey / shiftKey / ctrlKey / metakey

1. event.metaKey : 返回一个布尔值标识meta键(windows键)是否被按键并被保持。

返回true表示meta键按下并保持
返回false表示没有满足meta键按下并保持的情况。