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树加载完，包括一些脚本和图片内容全部加载完毕才会执行
