JavaScript如何进行事件绑定呢

JavaScript绑定事件的常用方式

1. 直接在dom元素中绑定

<button id="btn" onclick="clickBtn()">我是按钮，请点一点我吧！</button>
<script>
   function clickBtn(){
      alert("点击成功");
   }
</script>

2. 通过类名或者id名在脚本中绑定

<button id="btn">我是按钮，请点一点我吧！</button>
<script>
   let btn = document.getElementById("btn");
   btn.onclick = function {
      alert("点击成功");
   }
</script>

3. 通过侦听事件函数进行绑定

<button id="btn">我是按钮，请点一点我吧！</button>
<script>
   let btn = document.getElementById("btn");
   btn.addeventlistener('click',function(){
     alert("点击成功");
   })
</script>

这种方式的函数中可以传递三个参数，第一个参数为事件的名称，例如click、mouseover、mouseout、mousedown、mouseup、mousemove等等，第二个参数为事件执行函数，这两个参数为必传参数，还有第三个参数，第三个参数为布尔值，true、false，表示事件是否在冒泡或者捕获阶段执行，默认值为false，表示事件在冒泡阶段执行，true表示在捕获阶段执行

其实目前经常使用的是第二种和第三种，第一种已经不太常用了，直接在页面上进行绑定事件函数可能是页面复杂化，所以经常单独在脚本上进行绑定，那么第二种和第三种有哪些区别呢？

区别在于addeventlistener可以进行多次事件绑定，而第二种方式只能进行一次事件绑定，如果进行多次绑定，最后一次会覆盖前面的事件绑定

window.onload和window.addeventlistener(‘load’,function(){})加载页面的时间和顺序也不同，window.addeventlistener(‘load’,function(){})比window.onload先执行，window.addeventlistener(‘load’,function(){}) 在DOM树加载完毕之后执行，不包括一些脚本和图片等内容，而window.onload在DOM树加载完，包括一些脚本和图片内容全部加载完毕才会执行