javascript事件簡介

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript事件無疑是javascript語言的典型特徵之一，下面我們逐個一一進行討論並且舉例說明

1、onabort事件，onerror事件以及onload事件以及onunload事件

第一個用於img標籤，後兩個用於頁面以及映像的載入，分別為載入失敗和載入成功的時候所觸發的事件

如果映像的載入被中斷，那麼會觸發改事件

代碼：

<html><head><script type="text/javascript">function abortImage(){alert('Error: Loading of the image was aborted')}</script></head><body><img src="image_w3default.gif" onabort="abortImage()" /></body></html>

2、onblur事件與onfocus事件

blur的意思是模糊的意思，該事件是在頁面元素失去焦點的時候被觸發的。大部分的頁面元素都可以用來觸發該事件。有的人可能不明白失去焦點的含義，其實就是按下滑鼠或者鍵盤上的tab鍵時將焦點轉移到其他對象或者頁面，相反的是，focus是集中的意思，也就是元素獲得使用者焦點時所觸發的事件

代碼：

<html>
<head>
<meta charset="Utf-8">
   <script type="text/javascript">
   function upperCase()
   {
   var x=document.getElementById("fname").value
   document.getElementById("fname").value=x.toUpperCase()
   }
   </script>
</head>

<body>

輸入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />

</body>
</html>

3、onchange事件

當輸入欄位的內容改變的時候會觸發該事件

<html><head><script type="text/javascript">function upperCase(x){var y=document.getElementById(x).valuedocument.getElementById(x).value=y.toUpperCase()}</script></head><body>輸入您的姓名：<input type="text" id="fname" onchange="upperCase(this.id)" /></body></html>

4、onclick與ondbclick

含義分別為當使用者單擊和雙擊某元素的時候所觸發的事件

<html><body>Field1: <input type="text" id="field1" value="Hello World!"><br />Field2: <input type="text" id="field2"><br /><br />雙擊下面的按鈕，把 Field1 的內容拷貝到 Field2 中：<br /><button ondblclick="document.getElementById('field2').value=document.getElementById('field1').value">Copy Text</button></body></html>

5、有關鍵盤按鍵的事件，分別為onkeydown事件，onkeyup事件和onkeypress事件

含義分別為當按鍵按下和按鍵起來以及按鍵按下鬆開

ie是window.event,其他為event.which.chrome兩者都是支援的

<html><body><script type="text/javascript">function noNumbers(e){var keynumvar keycharvar numcheckif(window.event) // IE  {  keynum = e.keyCode  }else if(e.which) // Netscape/Firefox/Opera  {  keynum = e.which  }keychar = String.fromCharCode(keynum)numcheck = /\d/return !numcheck.test(keychar)}</script><form><input type="text" onkeydown="return noNumbers(event)" /></form></html>

6、onmousedown事件、onmousemove事件，onmouseout事件，onmouseover事件，onmouseup事件，有關mouse的事件

顧名思義

7、onsubmit事件

提交按鈕被按下的事件

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More