JavaScript -- 時光流逝（八）：js中的事件Event的使用

JavaScript: 知識點回顧篇（八）：js中的瀏覽器對象 ...

JavaScript -- 知識點回顧篇（八）：js中的事件Event的使用

事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行。

(1) onabort : onabort 事件會在圖像載入被中斷時發生。

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

(2) onblur :元素失去焦點時觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function txtToupper(){
        var x=document.getElementById("txt1").value
        document.getElementById("txt1").value=x.toUpperCase()
    }
</script>
</head>
<body>
    輸入小寫字母：
    <input type="text" id="txt1" onblur="txtToupper()" />
</body>
</html>

(3) onchange :域的內容被改變觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function txtToupper(){
        var x=document.getElementById("txt1").value
        document.getElementById("txt1").value=x.toUpperCase()
    }
</script>
</head>
<body>
    輸入小寫字母：
    <input type="text" id="txt1" onchange="txtToupper()" />
</body>
</html>

(4) onclick :當用戶點擊某個對象時觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function txtToupper(){
        var x=document.getElementById("txt1").value
        document.getElementById("txt1").value=x.toUpperCase()
    }
</script>
</head>
<body>
    <button onclick="txtToupper()">點我一下</button>
    <input type="text" id="txt1" />
</body>
</html>

(5) ondblclick :當用戶雙擊某個html元素時觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function txtToupper(){
        var x=document.getElementById("txt1").value
        document.getElementById("txt1").value=x.toUpperCase()
    }
</script>
</head>
<body>
    <button ondblclick="txtToupper()">點我一下</button>
    <input type="text" id="txt1" />
</body>
</html>

(6) onerror :在載入文檔或圖像時發生錯誤觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function loadImageError(){
          alert('Error: Loading of the image was aborted')
        }
</script>
</head>
<body>
    <img src="test.jpg" onabort="loadImageError()" />
</body>
</html>

(7) onfocus :元素獲得焦點觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1" onfocus="setStyle(this.id)" />
</body>
</html>

(8) onkeydown :某個鍵盤按鍵被按下觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1" onkeydown="setStyle(this.id)" />
</body>
</html>

(9) onkeypress :某個鍵盤按鍵被按下並鬆開觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1" onkeypress="setStyle(this.id)" />
</body>
</html>

(10) onkeyup :某個鍵盤按鍵被鬆開觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1"  onkeyup="setStyle(this.id)" />
</body>
</html>

(11) onload :一張頁面或一幅圖像完成載入觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function alertLoadingPageInfo(){
            alert('頁面載入中');
        }
</script>
</head>
<body onload="alertLoadingPageInfo()">
</body>
</html>

(12) onmousedown :滑鼠按鈕被按下觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1"  onmousedown="setStyle(this.id)" />
</body>
</html>

(13) onmousemove :滑鼠被移動觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1"  onmousemove="setStyle(this.id)" />
</body>
</html>

(14) onmouseout :滑鼠從某元素移開觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1"  onmouseout="setStyle(this.id)" />
</body>
</html>

(15) onmouseover :滑鼠移到某元素之上觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1"  onmouseover="setStyle(this.id)" />
</body>
</html>

(16) onmouseup :滑鼠按鍵被鬆開觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="green";
        }
</script>
</head>
<body>
    <input type="text" id="txt1"  onmouseup="setStyle(this.id)" />
</body>
</html>

(17) onreset :重置按鈕被點擊觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(){
            document.getElementById('txt1').style.background="yellow";
        }
</script>
</head>
<body>
    <form onreset="setStyle()">
        <input type="text"  id="txt1" />
        <input type="reset" value="Reset" />
    </form>
</body>
</html>

(18) onresize :視窗或框架被重新調整大小觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(){
            document.getElementById('txt1').style.background="yellow";
        }
</script>
</head>
<body onresize="setStyle()">
        <input type="text"  id="txt1" />
</body>
</html>

(19) onselect :文本被選中觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function setStyle(){
            document.getElementById('txt1').style.background="yellow";
        }
</script>
</head>
<body>
    <input type="text" id="txt1" /><br/>
    <input type="text" onselect="setStyle()" />
</body>
</html>

(20) onunload :用戶退出頁面觸發該事件。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        function alertClosePageInfo(){
            alert('將會關閉本頁面');
        }
</script>
</head>
<body onunload="alertClosePageInfo()">
</body>
</html>