jquery事件【mousedown與mouseup ----keydown與keypress與keyup】focus--blur--orrer--pageX-pageY

時間 2019-11-30
標籤 jquery 事件 mousedown mouseup keydown keypress keyup focus blur orrer pagex pagey 欄目 JQuery 简体版
原文原文鏈接
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
    <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        //<!--當【鼠標按下】的時候觸發mousedown事件-->
        $(function () {                              // mousedown 鼠標按下
            $("#btn1").mousedown(function () {
                $("#btn1").val(parseInt($("#btn1").val()) + 1)
            })
        })

        //-----------------------------------------------------------------

        //<!--當【鼠標彈起】的時候觸發mouseup事件-->
        $(function () {                              // mouseup 鼠標彈起
            $("#btn2").mouseup(function () {
                $("#btn2").val(parseInt($("#btn2").val()) + 1)
            })
        })


        //******************************************************************



        //<!--當【鍵盤按下】的時候觸發keydown事件-->
        $(function () {                              // keydown 鍵盤按下
            $("#btn3").keydown(function (e) {
                alert(e.keyCode); //在keydown事件下，keyCody就是當前按鍵的鍵盤碼 ：打印當前按鍵的鍵盤碼
                $("#btn3").val(parseInt($("#btn3").val()) + 1)

            })
        })

        //-----------------------------------------------------------------


        //<!--當【鍵盤按下】的時候觸發keypress事件-->
        $(function () {                              // keypress 鍵盤按下
            $("#btn4").keypress(function (e) {
                alert(e.keyCode)  //在keypress事件下，keyCody就是當前按鍵的ASCII碼 ：打印當前按鍵的ASCII碼
                $("#btn4").val(parseInt($("#btn4").val()) + 1);


            })
        })


        //<!-- KeyDown與keypress是按下一個鍵的意思, 但實際上兩者的根本差異是, 系統由KeyDown返回鍵盤的代碼, 而後由TranslateMessage函數翻譯成成字符, 搜索由KeyPress返回字符值. 所以在KeyDown中返回的是鍵盤的代碼。

        //而KeyPress返回的是ASCII字符。KeyPress主要用來接收字母、數字等ASCII字符。KeyPress 僅僅能捕獲單個字符,KeyPress 不區分小鍵盤和主鍵盤的數字字符。KeyPress 不顯示鍵盤的物理狀態（SHIFT鍵），而僅僅是傳遞一個字符。KeyPress 將每個字符的大、小寫形式做爲不一樣的鍵代碼解釋，即做爲兩種不一樣的字符。


        //而 KeyDown 和 KeyUP 事件過程可以處理不論什麼不被 KeyPress 識別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及不論什麼這些鍵和鍵盤換檔鍵的組合等。javascript
因此依據你的目的, 假設僅僅想讀取字符, 用KeyPress, 假設想讀各鍵的狀態, 用KeyDown。假設你一直按着鍵不放， 這時不斷地觸發KeyDown和KeyPress-->

        //KeyDown 和KeyUp 區分小鍵盤和主鍵盤的數字字符
        //-----------------------------------------------------------------


        //<!--當【鍵盤彈起】的時候觸發keyup事件-->
        $(function () {                              // keyup 鍵盤彈起
            $("#btn5").keyup(function () {
                $("#btn5").val(parseInt($("#btn5").val()) + 1)
            })
        })

        //******************************************************************

        //<!--當選中控件【得到焦點】的時候-->
        $(function () {                              // focus 得到焦點
            $("#txt1").focus(function () {
                $("#txt1").val(parseInt($("#txt1").val()) + 1)
            })
        })

        //------------------------------------------------------------------

        //<!--當選中控件【失去焦點】的時候-->
        $(function () {                              // blur 失去焦點
            $("#txt2").blur(function () {
                $("#txt2").val(parseInt($("#txt2").val()) - 1)
            })
        })


        //------------------------------------------------------------------

        //<!--當元素的【值發生改變】時，會發生 change 事件-->
        $(function () {                               // change 值發生改變
            $("#txt3").change(function () {
                alert("txt3值發生了變化")
                $(this).css("background", "red")
            })

        })

        //------------------------------------------------------------------

        //<!--當圖片載入出錯的時候發生error事件 比方找不到圖片的地址啊。等等，反正就是沒載入上圖片-->

        $(function () {                               // error 錯誤發生
            $("img").error(function () {
                $("img").replaceWith("這個一個圖片") //用"這個一個圖片" 的文字來替換載入出錯的圖片
            })

        })


        //------------------------------------------------------------------

        $(document).mousemove(function (e) {           //pageX,pageY 鼠標的座標
            $("span").text(e.pageX + ", " + e.pageY);
        });
    </script>
</head>
<body>
<p>當鼠標【按下】的時候觸發mousedown事件</p>
<input type="button"  value="0" id="btn1"/>
<br/>
<br/>
<hr/>
<p>當鼠標彈起的時候觸發mouseup事件</p>
<input type="button"  value="0" id="btn2"/>
<br/>
<br/>
<hr/>
<p>當鍵盤按下的時候觸發keydown事件</p>
<input type="button"  value="0" id="btn3"/>
<br/>
<br/>
<hr/>
<p>當鍵盤按下的時候觸發keypress事件</p>
<input type="button"  value="0" id="btn4"/>
<br/>
<br/>
<hr/>
<p>當鍵盤彈起的時候觸發keyup事件</p>
<input type="button"  value="0" id="btn5"/>
<br/>
<br/>
<hr/>
<p>當控件得到焦點的時候</p>
<input type="text"  value="0" id="txt1"/>
<br/>
<br/>
<hr/>
<p>當控件失去焦點的時候</p>
<input type="text"  value="0" id="txt2"/>
<br/>
<br/>
<hr/>
<p>當元素的值發生改變時。會發生 change 事件。</p>
<input type="text"  id="txt3"/>
<br/>
<br/>
<hr/>
<p>當元素的值發生改變時，會發生 change 事件。</p>
<br/>
<br/>
<hr/>
<p>找不到圖片地址，圖片就不能正常載入，圖片載入錯誤就會觸發orrer事件</p>
<img src=""/>
<br/>
<br/>
<hr/>
<p>span標籤用來顯示鼠標的橫縱座標的值</p>
<span></span>
</body>
</html>css