JavaScript的事件

一、事件传播的三个阶段

    1、捕获:从document到处罚地点

    实现：

 addEventListener("click",function(event){

        },true)
event.attachEvent("click",function(){});

    2、目标：事件传到触发点。

    3、冒泡：从触发地点到document。

   实现：

addEventListener("click",function(event){

			},true)
event.detachEvent("click",function(){});//IE8一下，只持冒泡

二、阻止事件传播

    event.stopPropagation();它会阻断事件的传播（不仅是阻止冒泡），但不会阻止元素上其他绑定事件的执行，比如：

<div id="a1">
	<div id="a2">点我</div>
</>
<script type="text/javascript">
	var a1 = document.getElementById("a1");
	var a2 = document.getElementById("a2");
	a1.addEventListener("click",function(event){
		alert("a1   捕获");
		
	},true)
	a2.addEventListener("click",function(event){
		alert("a2   捕获");
		event.stopPropagation();
	},true)
	a1.addEventListener("click",function(){
		alert("a1   捕获（第二个事件！）");
	},true)
	a2.addEventListener("click",function(){
		alert("a2   冒泡");
	},false)
	a1.addEventListener("click",function(){
		alert("a1   冒泡");
	},false)
</script>//“a1   捕获”，    a1   捕获（第二个事件！）"，    a2   捕获"，     a2   冒泡"

    event.stopImmediatePropagation()：它不仅阻止事件传播还阻止，阻止一个元素上绑定多的同一触发类型事件

<div id="a1">
	<div id="a2">点我</div>
</>
<script type="text/javascript">
	var a1 = document.getElementById("a1");
	var a2 = document.getElementById("a2");
	a1.addEventListener("click",function(event){
		alert("a1   捕获");
		event.stopImmediatePropagation();
	},true)
	a2.addEventListener("click",function(event){
		alert("a2   捕获");
		
	},true)
	a1.addEventListener("click",function(){
		alert("a1   捕获（第二个事件！）");
	},true)
	a2.addEventListener("click",function(){
		alert("a2   冒泡");
	},false)
	a1.addEventListener("click",function(){
		alert("a1   冒泡");
	},false)
</script>//“a1   捕获”

三、默认事件

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法（总共有哪些元素有默认行为？）

<a href="http://www.baidu.com" id="a1">百度</a>
<script type="text/javascript">
	var a1 = document.getElementById("a1");
	a1.addEventListener("click",function(event){
		event.preventDefault();
	},true)

</script>

四、事件委托

利用事件的传播机制，吧元素的事件绑在更外层的元素上，通过匹配当前的元素是不是目标元素来确定是否执行事件内容。

好处：1、动态事件绑定，新增子元素可以触发这个事件，不用单独绑定

           2、减少内存消耗，不用给每一元素都绑定事件，代码也更简洁

坏处：1、基于事件传播，可能被拦截掉（介意就近委托）

           2、别的模块引用的时候可能引发多余的事件触发

js实现：

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
});

jquery实现：

$("body").on("click","a",function(e){})

................................js的默认事件、委托.......................................................