js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: b ...
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>
