JS笔记之理解JS事件

（一）事件冒泡和事件捕获

事件冒泡：事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）
比如：div -> body -> html -> document -> window

事件捕获：由不太具体的节点更早的接受事件，而最具体的节点应该最后接收到事件
addEventListener()
使用案例：

var box = document.getElementById(‘box’);
//注意，第三个参数为默认为false，事件冒泡；true为事件捕获
box.addEventListener(‘click’,function(){},true);

事件流中的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段

（二）事件处理程序

HTML事件处理程序
<div onclick=“this.innerHTML += 1”></div>
或者写为：
<div onclick=“test();”></div>
Test函数在js中定义
缺点：html和js无法分离，后期不容易维护

DOM0级事件处理程序
优点：简单并且可以跨浏览器
缺点：不能给同一个元素绑定相同的事件处理程序，绑定了则会产生覆盖

var box = document.getElementById(‘box’);
box.onclick = function(){
	this.innerHTML += 1;
}
//删除事件处理程序
box.onclick = null;

DOM2级事件处理程序
定义程序的两种方法：

//注意，第三个参数为默认为false，事件冒泡；true为事件捕获
addEventListener(事件名，处理程序的函数，bool)
//注意第二个参数一定是要移除的函数名
removeEventListener(事件名，处理程序的函数名称，bool)

优点：可以给同一个元素绑定多个事件，但是IE8不支持

IE事件处理程序
略

（三）事件的调用顺序

相同：如果同时出现HTML事件处理程序和DOM0级事件处理程序，则DOM0级会覆盖HTML事件处理程序
不同：chrome，safari，firefox浏览器以及IE11的结果：DOM0级然后DOM2级；IE9和IE10结果为DOM0级然后DOM2级然后IE；IE8结果为DOM0级然后IE

（四）获取事件对象

event对象是事件处理程序的第一个参数，IE8不支持，得到的是undefined

var box = document.getElementById(‘box’);
box.onclick = function(event){
	console.log(event);
}

直接使用event变量

var box = document.getElementById(‘box’);
box.onclick = function(){
	console.log(event);
}

兼容性写法

var box = document.getElementById(‘box’);
box.onclick = function(e){
	e = e || window.event;
	box.innerHTML = e;
}

（五）事件目标对象

e.currentTarget获取事件当前所在的节点，正在执行的监听函数所绑定的节点
e.target 返回的是事件的实际目标对象，注意this对象和e.currentTarget是一致的，用的最多
e.srcElement与e.target的功能是一致的

（六）事件代理，事件委托

ul中好多li

window.onload = functino(){
	//常规方法实现
	var lis = document.getElementsByTagName(‘li’);
	for (let i=0;i<lis.length;i++){
		lis[I].onmouseover = function(){
			this.style.backgroundColor = ‘blue’;
		}
		lis[I].onmouseout = function(){
			this.style.backgroundColor = ‘black’;
		}
	}
}

在常规方法中，没有给未来新增的元素绑定事件，只针对原先存在的元素。

window.onload = functino(){
	//事件代理的方式实现，结合实际目标对象来说实现
	//事件代理应用：事件实际目标对象target和srcElement属性完成的
	//优点：提高性能，降低代码的复杂度
	var box = document.getElementsByTagName(‘box’);
	box.onmouseover = function(e){
		var target = e.target;
		target.style.backgroundColor = ‘blue’;
	}
	box.onmouseout = function(e){
		var target = e.target;
		target.style.backgroundColor = ‘black’;
	}
}

事件代理：未来新增的元素（可以使用ajax实现）也会被绑定上事件。

（七）事件冒泡

bubbles

bubbles返回一个bool值，表示当前的事件是否会冒泡，只读。
注意：大部分事件都会冒泡，但是focus blur scroll事件不会冒泡
e.bubbles();

cancelBubble

可以读写，默认值为false，
设置为true的时候，可以取消事件冒泡

stopPropagation()

取消事件的进一步冒泡，无返回值
但是无法阻止同一事件的其他监听函数

stopImmediatePropagation()

取消事件的进一步冒泡，无返回值
也可以阻止同一事件的其他监听函数

（八）事件流阶段

e.eventPhase
0表示事件没有发生，1表示捕获阶段，2目标阶段，3冒泡阶段

（九）取消默认行为

取消a标签的跳转
<a href=“javascript:void(0);”>这里</a>
<a href=“javascript:;”>这里</a>

事件对象中的两种阻止默认事件的方法：
e.preventDefault()
e.returnValue = false;

（十）事件对象中的位置坐标

clientX/Y和x/y：相对于浏览器（浏览器的有效区域）的X轴和Y轴的距离
screenX/Y：相对于显示器屏幕的X轴和Y轴
pageX/Y：相对于页面的X轴和Y轴的位置
offsetX/Y：相对于事件源的X轴和Y轴的距离