重要!常見事件介紹:http://www.ido321.com/1327.html

英文版:http://tw.newtonstudio.com/?p=59

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>03eventHandlerFocusBlur.html</title>

    <script>

        window.onload = function () {

            document.getElementById("idinput").onchange = change;

            //onchang:元素失去焦點並且元素內容改變時觸發,所以欄位內容被改寫時會觸發

            document.getElementById("idinput").onblur = blur;

            //onblur:元素失去焦點時觸發,所以游標離開欄位後背景變黃色

            document.getElementById("idinput").onfocus = focus;

            //onfocu:元素獲得焦點時觸發,所以點擊欄位時背景變綠色

        }

        function change() {

            document.fgColor = "red";//把螢幕上的「字」(非欄位內的字)改為紅色

            document.getElementById("idinput").style.color = "blue";//id="idinput"欄位內的字改為藍色

            //物件document.getElementById("idinput")的顏色改為藍色

        }

        function blur() {//把背景background-color改為黃色

            document.bgColor = "yellow";}

           

 

        function focus() {//把背景background-color改為綠色

            document.bgColor = "green";

        }

       

    </script>

</head>

<body>

    <input type="text" id="idinput" value="click here change bgColor" />

    <h1>this is h1</h1>

    <hr />

    name:<input type="text" id="idName" />

    <span id="idsp"></span>

    <br />

    password:<input type="password" id="idPwd" />

</body>

</html>



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>04eventHandlerMouseoverout.html</title>

    <script>

        window.onload = function () {

            document.getElementById("idimg").onmouseover = mouseover;

            //onmouseover:鼠標的光標移動到某對像上時觸發

            document.getElementById("idimg").onmouseout = mouseout;

            //onmouseout:鼠標光標離開某對像時觸發

 

        }

 

        function mouseover() {

            document.getElementById("idimg").src = "Images/chngstar.gif";

        }

 

        function mouseout() {

            document.getElementById("idimg").src = "Images/star.gif";

        }

    </script>

</head>

<body>

    <img id="idimg" src="Images/star.gif" />

</body>

</html>

 

乙方 發表在 痞客邦 留言(0) 人氣()