注册事件+事件传播和阻止

注册事件的两种方式(原生js)

	1. on + 事件名
			存在覆盖问题
			document.onclick = function(){
					alert(1);
			}
			document.onclick = function(){
					alert(2);
			}
			解绑事件
			document.onclick = null;
	
	2. 注册事件新方式 ---  添加监听事件  注册事件
		语法: addEventListener(event, listener, useCapture)
			参数:
			event	 		==> 事件名  onclick   事件名就是click (on  仅仅表示 当...的时候)
			listener		==>  事件处理函数
			useCapture		==> 默认值,false, 可选的
			这种绑定事件的方式是无法解绑的
			单纯的给函数起一个函数名,这种方式也是无法解绑的,因为foo在函数外部无法使用, 	原因:  函数声明在()内, 被解析成具名函数表达式
			document.addEventListener("click", function foo(){alert(3);}
			document.removeEventListener("click", foo)  //  无法解绑
			
			可以解绑的形式:
			function fn(){
				alert(4);
			}
			document.addEventListener("click",fn);
			document.removeEventListener("click",fn);  //  可以解绑
	
	函数表达式:  把一个匿名函数赋值给了变量
	具名函数表达式:  function后面跟的函数名在函数外部是无法使用的
	var fn = function foo(){
		console.log("函数调用了");
		console.log(foo);
	}
	console.log(foo);
	fn();
	
	小结:
		1. on + 事件名  ==> 存在: 覆盖的问题 (同一个元素,同一个事件,这样才会覆盖)
		解绑:  div.onclick = null;
		2. addEventListener("click", function(){})   //  因为参数是匿名函数,,所以是无法解绑的				
		3. 只有下面这种方式才可以解绑的
			var fn = function(){};
			addEventListener("click", fn)
			removeEventListener("click", fn)

事件的三个阶段

	任何一个事件都会进行三个阶段
		1.事件捕获
		2.目标阶段
		3.事件冒泡
	使用addEventListener注册的事件
	判断到底是事件捕获(true) 还是事件冒泡(false)取决于 addEventListener函数中的第三个参数是true还是false
	
	使用onclick 注册的事件只会在事件冒泡触发
	事件捕获和冒泡是传播的方式,不论元素有没有注册上事件都会传播

阻止事件传播:

stopPropagation();  // Propagation 传播
e.stopPropagation();  
该方法是事件对象e 中的方法 (可以阻止事件捕获和事件冒泡)

关于事件对象event的详细解释: 	
https://blog.csdn.net/qiang510939237/article/details/88129483