JS 基础 06：DOM操作 addEventListener()、事件流的事件捕获&事件冒泡、事件委托

1.addEventListener()的特性

赋值写法只能为元素绑定一个事件

		btn.onclick = function(){
			console.log("Hello");
		}
		btn.onclick = function(){
			console.log("button");	//第2个事件会覆盖第1个事件,只打印 butotn
		} 		

addEventListener()可以为同一个对象同时绑定多个事件

		btn.addEventListener("mouseenter",function(){
			console.log(1);
		})
		btn.addEventListener("mouseenter",function(){
			console.log(2);
		})	//打印1,2

2. 事件流的概念

例如，三个元素 Big,Medium,Small 依次嵌套，并均绑定了onclick()

点击之后，
事件的绑定顺序是由外到内。
事件的响应顺序是由内到外：small->medium->big。即默认在冒泡时期执行事件。

addEventListener(eventType,func,boolean)有三个形参：
第一个形参：表示在什么情况下触发，如“click"、"mousemove"
第二个形参：事件响应函数
第三个形参：值为true/false.默认值false表示在冒泡阶段执行；true表示在捕获阶段执行。

案例1：使用事件对象的函数e.stopPropagation()终止某一个结点的冒泡

实现：
点击按钮，显示一个盒子容器；
点击容器，颜色改变；
点击容器内按钮，容器隐藏

.container{
 	width: 300px;
 	height: 300px;
 	background-color: chartreuse;
 	display: none;
 }

<button class="out">show</button>
    <div class="container">
     <button class="in">close</button>
    </div>

    let outBtn = document.querySelector(".out")
 let container = document.querySelector(".container")
 let inBtn = document.querySelector(".in")
 		
 //点击 show 按钮，显示一个盒子容器
 outBtn.addEventListener("click",function(){
 	container.style.display = "block"
 })
 		
 //点击 盒子，绿变红
 	container.addEventListener("click",function(){
 	 container.style.background = "red"
  })
 		 
 //点击close ,隐藏盒子
         inBtn.addEventListener("click",function(e){
 	container.style.display = "none"
 	e.stopPropagation()
 	})
 		 
 //此时的问题是，绿色状态下关闭盒子后再点开，颜色变为红色。
 //因为事件冒泡执行：点了容器里的close按钮，不仅执行了隐藏盒子操作，尔后还执行了变色操作
 //希望每次关闭盒子再点开，都是初始的绿色
 //在close按钮的响应事件函数中写 e.stopPropagation() 表示只执行内部按钮的事件，不执行外部容器的事件	

3.事件委托

e.target代表父元素内指定的子元素

案例2：点击添加按钮，增加一个元素。点击元素，删除该元素

<input />
		<button type="button">按钮</button>
		<ul class="my-list">
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
		</ul>

    let btn = document.querySelector("button")
    let inp = document.querySelector("input")
    let ul = document.querySelector(".my-list")
			
    //点击按钮，在列表添加元素
    btn.addEventListener("click",function(){
    let value = inp.value
    let li = document.createElement("li")
    let txt = document.createTextNode(value)
    li.appendChild(txt)
    ul.appendChild(li)
    })
			
    //点击元素，删除元素
    //Event.target代表父元素中所触发的子元素
    ul.addEventListener("click",function(e){
    // console.log(this);		//点击ul的子元素，将打印<ul>整个标签。因为事件冒泡是从内到外的，DOM对象 <li>  没有绑定事件，那么绑定事件的<ul>将被执行
    // console.log(e.target);	//打印的是所触发的子元素
				
    ul.removeChild(e.target)
    })