给DOM节点上添加事件的几种方法

1.直接在标签上添加

<button onclick="function(1)">按钮</button>

2.用方法动态添加

//点击按钮一给按钮二添加点击事件
<button onclick="addFunction(1)">按钮一</button>
<button class="my_button">按钮二</button>

<script>
  function addFunction(){
    let temp = document.getElementByClassName("my_button")[0];
    temp.onclick = function(){
      //给按钮二添加的点击事件
    }
  }
</script>

3.通过监听事件添加

//点击按钮一给按钮二添加点击事件
<button onclick="addFunction(1)">按钮一</button>
<button class="my_button">按钮二</button>

<script>
  function addFunction(){
    let temp = document.getElementByClassName("my_button")[0];
    //注：这里是用匿名函数方式添加事件的监听，无法使用方法移除监听事件
    temp.addEventListener("click",function(){
      //给按钮二添加的点击事件
    })
  }



  //使用外部函数添加事件的监听，可以使用removeEventListener移除监听事件
  function addFunction(){
    let temp = document.getElementByClassName("my_button")[0];
    temp.addEventListener("click",testFun);  //注意:这里只能写函数名，不能加括号
  }

  //移除监听事件
  function removeFunction(){
    let temp = document.getElementByClassName("my_button")[0];
    temp.removeEventListener("click",testFun);
    //事件监听移除时需要函数的名称，这就是无法使该方法移除使用匿名函数添加的监听事件的原因
  }

  function testFun(){
    //给按钮二添加的点击事件
  }
</script>