绑定事件 addEventListener
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 “click” 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p> <button id="myBtn">点我</button> <script> var x = document.getElementById("myBtn"); for(var i = 0;i < 3;i++){ //内部函数 x.addEventListener("click", function(){ alert("hhh");}); //内部函数调用匿名函数 x.addEventListener("click", function(){ myFunParam(2,3); }); //调用函数再调用匿名函数 x.addEventListener("click",myFunctionParam); //调用函数 x.addEventListener("click", myFunction); } function myFunction() { alert ("Hello World!") } function myFunParam(a,b){ alert(a + b); } function myFunctionParam(){ myFunParam(3,4); } </script> </body> </html>