在JavaScript中,調用事件的方式共有2種:
下面詳細給大家介紹這2種JavaScript事件的調用方式。
在script標簽中調用事件,也就是在<script></script標簽內部調用事件。
語法:
var 變量名 = document.getElementById("元素id");//獲取某個元素,並賦值給某個變量 變量名.事件處理器 = function() { …… }
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <input id="btn" type="button" value="提交" /> <script type="text/javascript"> var e = document.getElementById("btn"); e.onclick = function () { alert(" 學習網"); } </script> </body> </html>
在浏覽器預覽效果如下:
分析:
當點擊了按鈕之後,JavaScript就會調用鼠標的點擊(onclick)事件,效果如下:
很多人覺得很奇怪,document.getElementById()獲取的是一個元素,能賦值給一個變量嗎?答案是可以的。那問題又來了,為什麼要使用document.getElementById()來獲取一個元素賦值給一個變量呢?用以下代碼不行麼?
<script type="text/javascript"> document.getElementById("btn").onclick = function{ alert(" 學習網"); } </script>
其實上述代碼也是可行的,只不過呢,如果不使用document.getElementById()來獲取一個元素賦值給一個變量,以後我們如果要對該元素進行多次不同操作,豈不是每次都要寫document.getElementById()?這樣的話,代碼就會顯得很冗余。
在元素中調用事件,我們在“JavaScript在HTML的引用方式”這一節已經給大家介紹過了。
在元素事件中引入JS,就是指在元素的某一個屬性中直接編寫JavaScript程序或調用JavaScript函數,這個屬性指的是元素的“事件屬性”。
舉例1:(在元素事件屬性中直接編寫JavaScript)
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <input type="button" onclick="alert(' 學習網')" value="按鈕"/> <body> </html>
在浏覽器預覽效果如下(點擊按鈕後的效果):
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function alertMessage() { alert(" 學習網"); } </script> </head> <body> <input type="button" onclick="alertMessage()" value="按鈕"/> <body> </html>
在浏覽器預覽效果(點擊按鈕後的效果)如下:
分析:
那麼這兩種方法有什麼本質的區別呢?其實,第2種方法不需要使用getElementById()等方法來獲取DOM,然後才調用函數或方法。因為它是直接在JavaScript元素中調用的。
這2種調用JavaScript事件的方式,大家剛剛開始看不理解沒關系,我們只是給大家說個語法,留個印象。在接下來的章節中,我們會經常接觸。