<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DOM2级事件addEventListener</title> <!-- 绑定事件的三种方法： 1）HTML内部定义； 在HTML文档中写js代码，强耦合，不利于代码复用 2）DOM0级事件； 事件对象绑定 松耦合 HTML和js分离；缺点：有且只能绑定一个事件；只执行最后绑定的事件 3）DOM2级事件； 使用addEventListener()函数绑定事件；松耦合 HTML和js分离；优点：能绑定多个事件，事件捕获和事件冒泡 ele.addEventListener("a",b,false);为元素ele绑定事件a,触发事件a时执行代码b（也称句柄b） tips: DOM2级事件不用加 on --> </head> <body> <button id="btn">弹框</button> <script> var btn=document.getElementById("btn");//获取对象 //绑定事件 btn.addEventListener("click",function (){ alert("Hello"); },true) </script> </body> </html>