其他分享
首页 > 其他分享> > 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。是同步进行的。

 

 

标签:console,onkeypress,oTxt,onkeydown,js,onkeyup,event
来源: https://www.cnblogs.com/webSnow/p/15587112.html