Dom2级事件的增加和删除事件

<style>
    #box{
    
    
        width: 600px;
        height: 600px;
        background: red;
    }
    #box1{
    
    
        width:400px;
        height: 400px;
        background: green;
    }
    #box2{
    
    
        width: 200px;
        height: 200px;
        background: blue;
    }
</style>

<div id="box">
    <div id="box1">
        <div id="box2">

        </div>
    </div>
</div>

 //Dom2级事件定义了两种方式实现:EventListener :事件监听
  //addEventListener  添加事件
  //removeEventListener 删除事件

  //添加事件:三个参数： 字符串类型"执行事件" 、执行函数(命名或匿名)、布尔值类型（true或false）、
  // 第三个参数（默认是冒泡阶段false）如果给参数就是捕获阶段（true）
  // box2.addEventListener("click",fn1,false);//通常是冒泡阶段    三种都执行了 由内向外执行 box2 box1 box
  // box1.addEventListener("click",function () {
    
    
  //     alert("box1被单击了");//box1 box
  // },false);
  // box.addEventListener("click",function () {
    
    
  //     alert("box被单击了");//box
  // },false);

//  Dom2级事件相同元素上可以多次绑定     Dom0级事件相同事件只能绑定一次

  // box2.addEventListener("click",function () {
    
    
  //     alert("box2被单击了")//box box1 box2
  // },true);//捕获阶段    三种都执行了 由外向里执行
  // box1.addEventListener("click",function () {
    
    
  //     alert("box1被单击了");//box box1
  // },true);
  // box.addEventListener("click",function () {
    
    
  //     alert("box被单击了");//box
  // },true);

   //Dom 0级事件同一个元素只能绑定一次 多次的后写的会覆盖先写的
  // box2.οnclick=function() {
    
    
  //     alert("第一次单击了");
  // };
  // box2.οnclick=function() {//第二次覆盖第一次
  //     alert("第二次单击了");//只弹出一次
  // }

  //Dom2级事件删除事件   (假如例子:同一元素执行一次不在执行  方法如下:)
  //DOM2级事件 移除必须是调用的方式书写（如下:）
 // function fn1(){
    
    
 //     alert("fn1被单击了")//移除事件box2就不显示了
 // }
 // box2.removeEventListener("click",fn1)//两个参数:取消事件"click" 、起不同的函数名 fn1、
 //总结:removeEventListener移除事件 只能移除addEventListener添加的事件 移除叫做命名函数的事件:fn1
 //Dom2级事件:同时执行捕获和冒泡的添加事件  在移除某一事件（例子:fn1） 某一事件就不执行了
 
  //移除事件 removeEventListener
  box2.addEventListener("click",del,false);//单击 删除 冒泡由内向外
  function del() {
    
    
      box2.remove();//删除box2
  }
  //单击后移除del
 // box2.removeEventListener("click",del);