詳細解讀javascript客戶端事件驅動（圖文教學）-js教程-PHP中文網

詳細解讀javascript客戶端事件驅動（圖文教學）

亚连

發布： 2018-05-21 10:14:23

原創

1300 人瀏覽過

下面我就為大家帶來一篇淺談javascript基礎之客戶端事件驅動。現在就分享給大家，也給大家做個參考。

我們知道，物件導向發展起來後，“一夜之間”，幾乎所有的語言都能基於物件了，JavaScript也是基於物件的語言。使用者在瀏覽器上的行為稱作「事件」,之後引發的一系列動作，例如彈跳窗啦，改變瀏覽器大小啦，驗證啦，balabala，都叫做「事件驅動」。當然，這次我主要介紹幾個常常發生的事件。

ps：對於js腳本的支援是以瀏覽器而定！！！有的低版本的瀏覽器可能不支援！！！

1.點擊事件（onClick）

啥叫點擊事件呢？當使用者點擊滑鼠按鈕是，就會產生點擊事件。同時onclick指定的事件處理程序將會被呼叫。通常會應用在button（按鈕物件）、checkbox（複選框）、radio（單選按鈕）、reset buttons（重置按鈕）、submit buttons（提交按鈕）。

放大招：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之单击事件</title>

</head>
<body>
<form>
  <script language="JavaScript">
    function aclick(){
      alert("你刚才单击了按钮");
    }
  </script>
  <input type="button" value="按钮" onclick= "aclick()" />
</form>

</body>
</html>

登入後複製

效果如下圖：

#2.更改事件（onChange）

一旦使用者更改表單的值時，就會觸發onchange事件。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

登入後複製

效果如下圖：

#3.選取事件（onSelect）

當頁面中的元素被選取時，就會觸發onselect事件。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

登入後複製

效果如下圖：

#4.載入事件（onLoad）

載入事件是在剛開啟網頁時，觸發的事件。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之加载事件</title>
  <script language="JavaScript">
    function check(){
      alert("莫急莫急，小D正在骑马来的路上,O(∩_∩)O哈哈~");
    }
  </script>
</head>
<body onload="check()">
</body>
</html>

登入後複製

效果如下圖：

#5.卸載前事件（beforeunload）

#確切地說，稱為「離開頁面前事件」比較恰當，當你點擊目前標籤頁的關閉按鈕時會觸發此事件。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之卸载前事件</title>
  <script language="JavaScript">
    function check1(){
      alert("你真的要离我而去呢？╥﹏╥...");
    }
  </script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>

登入後複製

效果如下圖：