JS的事件监听与委托机制

JS的事件监听机制

小故事：

很久以前有个叫Netscape的姑娘，她制订了Javascript的一套事件驱动机制（即事件捕获）

后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则（事件冒泡）

再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”；
执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

善良的Netscape以及其姐妹们都接受了媒婆的建议，采用了新的事件规则，而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。那么，怎么绑定事件呢？

由于这两派浏览器的差异，其绑定的方法也不一样，其中，遵循标准的浏览器使用W3C定义的addEventListener函数绑定，函数定义如下：）

function addEventListener(event, function,bool) 
event: 事件名称，如click、mouseover…（记得加引号）
function: 绑定到事件中执行的动作
bool: 指定是否绑定在捕获阶段，true为是（捕获），false为否（冒泡），默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流

（兼容IE）
IE中使用自有的attachEvent函数绑定时间，函数定义如下：
function attachEvent(event, function)
event: 事件名称，但要加上on，如onclick、onmouseover…
function: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流

什么是冒泡和捕获呢？
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

在捕获中，外部元素会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发，然后再触发

JS的事件委托机制

一 事件委托原理：把原本要加给多个子元素的相同事件，我们直接把这个事件加给他们共同的父元素。利用事件的冒泡原理，配合事件源找到真正的触发的子元素。

二：事件委托的好处：

1.节省了性能（只给他的父元素加事件减少DOM的操作）

2.可以给页面上暂时不存在的元素加事件
三: 事件监听的实现：

1.event对象提供的target属性，可以返回真正的目标节点也就是触发的事件源

2.target的兼容写法：var target = ev.target || ev.srcElement

3.this和target：在事件监听中一般不会使用this，this在事件监听中指的事件源而不是真正的所点击的触发事件源的节点，target属性可以返回真正的目标节点也就是触发的事件源

演示代码：

<ul class="box">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>     //li是可以暂时不存在，后面渲染添加，但是他的事件可以提前添加
</ul>
<script>
	var ulobj=document.querySelector('.box');
	ulobj.onclick=function(event){
		var e=event || window.event;
		var target=e.target|| e.srcElement;  
		if(target.nodeName == 'LI'){     //nodeName 所包含的 XML 元素的标签名称永远是大写的
			console.log(target);
		}
	}

</script>