DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 14.2 JavaScript事件調用方式
14.2 JavaScript事件調用方式
編輯:JavaScript基礎知識     

在JavaScript中,調用事件的方式共有2種:

  • (1)在script標簽中調用;
  • (2)在元素中調用;

下面詳細給大家介紹這2種JavaScript事件的調用方式。

一、在script標簽中調用事件

在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事件的方式,大家剛剛開始看不理解沒關系,我們只是給大家說個語法,留個印象。在接下來的章節中,我們會經常接觸。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved