二阶段JavaScript-Day13知识点整理(DOM事件、事件类型、事件对象)

1.事件概念和事件三要素

​ 事件就是能被JS监听到的的行为。

​ 事件三要素：

​ 1.事件源：触发事件的源头，谁触发的事件谁就是事件源。

​ 2.事件类型：是哪种事件类型，如：鼠标事件，键盘事件…(click, dblclick, mouseover, mouseout…)

​ 3.事件处理函数：事件触发后执行的行为({}中会执行的代码)

2.this的指向

//事件中的this，指向事件源，即oBtn。
oBtn.onclick = function(){
    this.style.backgroundColor = '';
}

//普通函数中的this，指向window
function method(){
    console.log(this);
}

3.事件的绑定(事件注册)

1.DOM0级事件绑定
	语法：事件源.on事件类型 = 事件处理函数;
	缺点：不能给同一个对象的同一个事件进行多次绑定。
    优点：书写简单，兼容性好。
    
2.DOM2级事件（事件监听）
	语法：事件源.addEventListener("事件类型", 事件处理函数, 布尔值);第三参数可省。
	优点：可以给同一个对象的同一个事件进行多次绑定。
    缺点：兼容性不佳（IE低版本不支持该写法）

	IE低版本支持
    语法：事件源.attachEvent("on事件类型", 事件处理函数);只有两个参数。

4.事件的解绑

1.DOM0级事件解绑
	语法：事件源.on事件类型 = null;

2.DOM2级事件解绑
	语法：事件源.removeEventListener('事件类型', 事件处理函数);
	注意：先绑定再移除（函数在外面单独写）
		1.绑定：事件源.addEventListener('事件类型', fn);
		2.移除：事件源.removeEventListener('事件类型', fn);
	function fn(){};

5.事件类型

鼠标事件
click 单击
dblclick 双击
mouseover / mouseout 鼠标移入 / 鼠标移出
mouseenter / mouseleave 鼠标移入 / 鼠标移出
mousedown / mouseup 鼠标按下 / 鼠标弹起
mousemove 鼠标移动
contextmenu 鼠标右键

表单事件
focus 获得焦点时触发
blur 失去焦点时触发
input 输入内容时触发,输入的时候就触发
change 内容发生改变时触发,需要失去焦点一次，内容与初始状态发生了改变就触发。
submit 提交时触发
reset 重置时触发

键盘事件
	注意：不是任何元素都可以绑定键盘事件，window，document
    表单元素是可以绑定键盘事件的
keydown 按下键盘的按键触发，会连续触发。
keypress 按住键盘的按键触发，会连续触发。
keyup 当键盘中按下的按键弹起时触发。

浏览器事件
window.onscroll = function(){}; 页面滚动时触发
window.onresize = function(){}; 页面窗口大小变化时触发
window.onload = function(){}; 页面资源(图片，视频...)加载完成时触发

6.事件对象

​ 事件对象：

​ 事件对象中包含(记录)该事件发生时的一系列的信息。

​ 事件对象的获取：

​ 标准浏览器下的获取：

​ 事件处理函数的参数位置，书写一个参数，这个参数就是事件对象。

tianIn.onclick = function(e){ };//e就是事件对象

​ IE低版本获取：事件处理函数的内部用window.event来表示事件对象。

​ 处理兼容性问题：

tianIn.onclick = function(e){
    var ve = e || window.event;
    //ve就是兼容性的事件对象
}

​ 鼠标事件对象的一些属性：

1.鼠标点击位置距离页面的左偏移量和上偏移量
e.pageX 和 e.pageY

2.鼠标点击位置距离浏览器窗口的左偏移量和上偏移量
e.clientX 和 e.clientY

3.鼠标点击位置距离自身元素（事件源）的左偏移量和上偏移量
e.offsetX 和 e.offsetY