js事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var btn = document.querySelector("#btn"); //时间句柄 var clickme = function(){ alert("hello~"); } btn.addEventListener("click", clickme); }); </script> </head> <body> <button id="btn">点击我</button> </body> </html>
事件监听的三种方法：
1、直接在html上添加事件（不建议）
强耦合，不利用代码复用
2、DOM 0级
一个元素只能绑定一个事件的限制
如果绑定了多个事件，后面的会覆盖掉前面的
2、DOM 2级
一个事件可以绑定多个监听函数
还可以定义事件捕获和事件冒泡
btn.addEventListener("click", fn, false); 第三个参数默认是false
btn.attachEvent("onclick", fn); IE的事件监听函数attachEvent
document.body.addEventListener("load", init);
document.body.attachEvent("onload", init);
function init(){}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ // DOM 0级 var btn3 = document.querySelector("#btn3"); btn3.onclick=function(){ alert("hello3~"); } var btn4 = document.querySelector("#btn4"); function click4(){ alert("hello4~"); } btn4.onclick=click4; // DOM 2级 var btn5 = document.querySelector("#btn5"); //事件句柄 var click5 = function(){ alert("hello5~"); } //这里的clickme不需要加括号 btn5.addEventListener("click", click5); }); </script> </head> <body> <!-- 直接加在HTML上的两种方式 --> <button id="btn1" onclick="alert('hello1~')">按钮1</button> <!-- 这里的click1()需要加括号 --> <button id="btn2" onclick="click2()">按钮2</button><br> <!-- DOM 0级 --> <button id="btn3">按钮3</button> <button id="btn4">按钮4</button><br> <!-- DOM 2级 --> <button id="btn5">按钮5</button> <script> // 突然发现这个函数只能在btn的后面，而不能在前面 // 即使用了domReady也不行哎 function click2(){ alert("hello2~"); } </script> </body> </html>