javascript事件簡介

鴨脖發表於2012-05-19
JavaScript事件

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).value
document.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 keynum
var keychar
var numcheck

if(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事件

提交按鈕被按下的事件

相關文章