javascript中事件處理的方法有:1、在標簽的事件屬性中添加事件,語法“<標簽名 事件屬性名="事件處理程序">”;2、使用事件源的事件屬性綁定事件處理函數,語法“事件源對象.on事件名 = 事件處理函數”。
本教程操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
javascript事件處理的方法
方法1、在標簽的事件屬性中添加事件
使用HTML標簽的事件屬性綁定處理程序。需要注意的是,使用 HTML 標簽的事件屬性綁定事件處理程序的方式時,事件屬性中的腳本代碼不能包含函數聲明,但可以是函數調用或一系列使用分號分隔的腳本代碼。
示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <script> function printName(){ var name = "張三"; alert(name); } </script> </head> <body> <input type="button" onClick="printName()" value="事件綁定測試"/> </body> </html>
方法2、使用事件源的事件屬性綁定處理程序
使 HTML 和 JS 分離的其中一種方式是通過使用事件源的事件屬性綁定事件處理函數,綁定格式如下:
obj.on事件名 = 事件處理函數
格式中的 obj 為事件源對象。綁定的事件程序通常為一個匿名函數的定義語句,或者是一個函數名稱。
事件源的事件屬性綁定處理程序示例:
oBtn.onclick = function(){//oBtn為事件源對象,它的單擊事件綁定了一個匿名函數定義 alert('hi') };
示例:使用事件源的事件屬性綁定事件處理函數。
<!doctype html> <html> <head> <meta charset="utf-8"> <script> window.onload = function(){//窗口加載事件綁定了一個匿名函數 //定義一個名為fn的函數 function fn(){ alert('hello'); } //獲取事件源對象 var oBtn1 = document.getElementById("btn1"); var oBtn2 = document.getElementById("btn2"); //綁定一個匿名函數 oBtn1.onclick = function(){ alert("hi"); } //綁定一個函數名 oBtn2.onclick = fn; }; </script> </head> <body> <input type="button" id="btn1" value="綁定一個匿名函數"> <input type="button" id="btn2" value="綁定一個函數名"> </body> </html>
【推薦學習:javascript高級教程】