1. 程式人生 > 其它 >js阻止預設事件 (兩種方法)及鍵盤事件onkeydown 、 onkeypress 、onkeyup例項講解

js阻止預設事件 (兩種方法)及鍵盤事件onkeydown 、 onkeypress 、onkeyup例項講解

js阻止預設事件 (兩種方法)及鍵盤事件onkeydown 、 onkeypress 、onkeyup例項講解

時間:2018-09-27 本文章向大家介紹js阻止預設事件 (兩種方法)及鍵盤事件onkeydown 、 onkeypress 、onkeyup例項講解,需要的朋友可以參考一下

阻止預設事件 (兩種方法)

1> event.preventDefault();

2>return false;

return false:相當於 event.preventDefault() + event.cancelBubble = false + event.stopPrapagation() 的集合;

鍵盤事件

事件:onkeydown 、 onkeypress 、onkeyup

鍵值:event.keyCode

document.onkeydown = function (e) {
                e = e||window.event;

                console.log( e.keyCode );
                if (e.keyCode === 116){
                   e.preventDefault();
               }
 }

onkeydown:
按下時觸發,假設不抬起,會持續(多次)觸發
onkeypress:
和onkeydown類似,但是隻響應能鍵入值的鍵(比如ctrl 是不能鍵入值的,所以不能響應)

onkeyup:
抬起鍵時觸發,一次抬起觸發一次

又:

onkeydown在鍵入值之前觸發
onkeyup在鍵入值之後觸發

<input type="text" id="txt" />
<script>
            var oTxt = document.querySelector('#txt');
            
           /*
            oTxt.onkeydown = function (e) {
                   console.log( this.value );
            }*/
            
            oTxt.onkeyup = function (e) {
                   console.log( this.value );
            }
</script>

在input框中:

oTxt.onkeydown: 依次輸入1,2,3,4 console中依次出現:1,12,123。 也就是說知道按下一個鍵時,才會觸發上一個事件

oTxt.onkeyup: 依次輸入1,2,3,4 console中依次出現:1,12,123, 1234。是同步進行的。