keydown keypress keyup oninput 小总结

keydown keypress keyup oninput 小总结

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




在console运行,输入12,每四行为按下键盘后松开,输入功能键的话只有onkeydown和onkeyup,长按某个键的话onkeydown会被一直触发

keydown keypress keyup oninput 小总结_第1张图片
在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

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

var ullist = document.getElementById("email-sug-wrapper");
var lielem = ullist.getElementsByTagName("li");
for(var i=0;i

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

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

你可能感兴趣的:(keydown keypress keyup oninput 小总结)