事件冒泡与捕获以及事件监听

事件冒泡与捕获、事件监听与事件委托

html 页面和js的互动是通过事件来完成的，事件捕获是指从document一直到触发事件的那个节点，而事件冒泡则恰恰于此相反。他们就是事件触发顺序的术语而已，一个从上到下，一个从下到上。
事件对象有一条属性叫做path（路径），同一个事件的冒泡和捕获都是在相同的路径上；只是顺序不同，起点终点相反。

事件冒泡

从事件源到顶层对象，即触发元素到window的事件执行顺序

事件捕获

从顶层对象到事件源，即触发元素到window的事件执行顺序

事件监听

调用对象.addEventListener(参数1，参数2，参数3)
参数1 ： 事件类型
参数2 ： 触发事件后执行的函数
参数3 ： 布尔值 默认值是 false 事件冒泡 ； true 事件捕获

    son.addEventListener("click",function (event) {
        console.log("1");
        // 阻断事件冒泡
        // 调用对象.stopPropagation()
        // 在事件执行前后阻断都可以
        event.stopPropagation();
    },false);
    

删除事件监听

调用对象.removeEventListener(参数1，参数2，参数3)
注意事项：

1. 相同元素调用
2. 相同事件名称
3. 相同函数名(匿名函数不行,需要全局函数)
4. 相同的执行阶段

	function abv() { // window.abv
        console.log("4");
    }
    
    gf.removeEventListener("click",abv,true);
    

普通事件绑定和 事件监听的区别

1. 普通的只能给元素相同类型的事件绑定一个，如果绑定相同的第二个，会将上一个覆盖
   事件监听可以给 同一个元素的相同类型事件绑定多个
2. 事件监听可以控制事件的传播方式(冒泡或捕获)
3. 事件监听可以通过删除的方法，来取消事件，而普通绑定只能通过 null来取消

事件委托

实现的原理是通过 ：事件冒泡

优点

• 只在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能
• 对于新添加的元素也会有之前的事件（可以把事件帮给未来元素）

与普通事件绑定的对比

• 普通事件绑定

	for(var i = 0; i< list.length; i++){
		list[i].index = i;
		list[i].onclick = function () {
			console.log(this.index+1);
		}
   }

• 事件委托

	var ul_list = document.getElementsByTagName("ul")[0];

	ul_list.addEventListener('click',function (event) {
	// console.log(event.target);

	// 给多个元素同时 绑定相同的功能
	// var s = event.target;
	// var s = event.target.id;
	var s = event.target.tagName;
	console.log(s.nodeName); 节点名称 是大写
		if(s.toLowerCase() == "li"){
			console.log("da");
		}

	//绑定不同的功能
//   	if(s == "list1"){
//			console.log("1");
//    	}
//   	if(s == "list2"){
//       	console.log("2");
//    	}

	});
	

阻断事件冒泡与阻止默认事件触发

• 阻断事件冒泡

	son.addEventListener("click",function (event) {
		console.log("1");
		// 阻断事件冒泡
        // 调用对象.stopPropagation()
        // 在事件执行前后阻断都可以
        event.stopPropagation();
    },false);
    

• 阻止默认事件触发

	two.ondragover = function (ev) {
		// 阻止默认事件的 
		
		//方式1：
		ev.preventDefault(); // ( W3C推荐 )
		
		//方式2
        // return false; ( HTML / DOM 级别 ) 
        
		//方式3
        // event.returnValue = false; ( IE )       
        }