有关onkeydown onkeypress onkeyup oninput 以及循环绑定的小笔记

最新推荐文章于 2023-02-02 19:17:16 发布

weixin_30767835

最新推荐文章于 2023-02-02 19:17:16 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/txland/p/9464986.html

本文详细解析了键盘事件的触发顺序及处理方法，包括keydown、keypress、oninput和keyup等事件的区别与应用。通过示例代码展示了如何获取键码(keyCode)和字符编码(charCode)，并介绍了在JavaScript中如何有效地使用这些事件。

keydown keypress keyup oninput 小总结

事件触发顺序：keydown - > keypress - > oninput -> keyup

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
    
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    console.log('onkeyup ' + this.value);
}
input.oninput = function() { 
    console.log('oninput ' + this.value);
}
</script><input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
    
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    console.log('onkeyup ' + this.value);
}
input.oninput = function() { 
    console.log('oninput ' + this.value);
}
</script>

在console运行，输入12，每四行为按下键盘后松开，输入功能键的话只有onkeydown和onkeyup，长按某个键的话onkeydown会被一直触发
在console中的结果
当我们监听前面三个事件时，最想得到的数据信息就是键码(keyCode)和字符编码(charCode)了。

　　键码(keyCode)

　　在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，keyCode属性的值就是小写字母或数字对应的ASCII码(点击这里查看ASCII码表)，在程序中可通过如下代码来获得keyCode值：

var input = document.getElementById("email-input");
 input.onkeyup = function(event){
        event = event||window.event;
        var key = event.keyCode;
        if(key == 38){//方向键上
            //代码内容
            event.preventDefault();//将默认的行为去除
        }
        else if(key == 40){//方向键下
          //代码内容
            event.preventDefault();//将默认的行为去除
        }
        else if(key == 13){//回车
            //代码内容
        }
       //代码内容
    }

如果要让字符不输入到输入框中，应该在onkeydown或者onkeypress阶段进行处理，onkeyup时文本已经输入到输入框中了
oninput可以对复制粘贴来的文字进行响应，另外3个不行

循环绑定事件

一开始这么写发现每个元素点击运行时，显示的 i值都是 length；
因为js的函数是调用时触发，绑定事件的时候i值并没有被传入执行函数里。
作为异步监听的事件，点击事件发生的时候，循环已经结束，此时的 i值为length, 触发事件传递的参数自然是同一个最大值，而不是预期不同元素传不同值。

var ullist = document.getElementById("email-sug-wrapper");
var lielem = ullist.getElementsByTagName("li");
for(var i=0;i<lielem.length;i++)
        lielem[i].onclick = function(){
            input.value = lielem[ii].lastChild.nodeValue;
            ullist.style.display = "none";
            }

应该按照如下方法进行绑定

var ullist = document.getElementById("email-sug-wrapper");
var lielem = ullist.getElementsByTagName("li");
for(var i=0;i<lielem.length;i++)
        lielem[i].onclick = (function(ii){
            return function(){
            input.value = lielem[ii].lastChild.nodeValue;
            ullist.style.display = "none";
            }
        })(i);

以上代码利用了闭包，匿名闭包函数声明后立即执行，传递了i值，于是在它的函数域里保存了i值（arguments参数列表里）；
函数的返回结果是事件处理函数，其参数ii就是colsure里保存的ii值，也就是循环时就传递的i值。

另外：
event.preventDefault();可以用来阻止默认事件的发生

转载于:https://www.cnblogs.com/txland/p/9464986.html