首页 > JavaScript问题请教:为什么给div加onkeydown事件失败?

JavaScript问题请教:为什么给div加onkeydown事件失败?

先贴上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
#box{width:100px;height:100px;
    background:lime;
}
</style>
</head>

<body>
    <div id="box"></div>
    <input type="text" value="" id="btn" />
<script>
    window.onload=function(){
        var oBox=document.getElementById('box');
        var oBtn=document.getElementById('btn');
        //div加onkeydown事件,失败。
        oBox.onkeydown=function(){
            alert('div');
        };
        //给input加onkeydown,成功
        oBtn.onkeydown=function(){
            alert('btn');
        };    
            
    };
</script>
</body>
</html>

请问,为什么给div标签加onkeydown事件失败,而给input标签加onkeydown事件却能成功呢?多谢!


IE不支持charcode和which
在FF和chrome中div没有focus的话就不能相应onkeypress了 你可以给div加一个tabindex的值 任意的就好 然后就可以响应了
keycode能响应shift ctrl等非字符键
charcode能区分大小写 但是不能响应非字符键

charcode只能在onkeypress下面才有值,其他的onkeydown onkeyup下面是没有值的
keycode在onkeypress下面没有值


其实将@xiadd和@rickytan的答案结合就可以解答题主的问题了。
但其实呢,题主,你的问题本身是有一些小问题的。因为,并不是给div加keydown事件失败,input加keydown成功,所有的元素都是可以添加keydown事件的。这里div的onkeydown事件处理程序只是一个声明,但是,问题就在于div没有获取你keydown的事件流,所以,这个事件处理程序,有声明却并没有执行。那为什么input行呢,你在input,keydown的时候,别把光标点上去,试试,是一样不能执行onkeydown的事件处理程序的。
那么,为什么document是可以的呢,这就是另外的问题了,因为HTML中的事件流是冒泡机制传播的,如果不执行stopPropagation()阻止事件持续传播的话,document就可以get到你keydown的事件流。window当然就更可以了。总之,可以简单按照@xiadd的答案理解,实际应用中,一般都是在input加键盘事件就好了。如果你实在想只让div进行事件处理,一种是,冒泡捕获,让div暴露可供提供焦点的接口(子元素);还有一种是自定义事件模拟。当然这又是另外的话题了。


没有光标如何响应key事件啊, 你给div设置属性contenteditable="true",然后focus之后你再试试就知道了


Focused element processing the key event, root element if no suitable input element focused.MDN

div没有获得焦点,一般我使用键盘事件都是document和input。其他也不会起作用


不会失败,http://jsfiddle.net/rickytan/zkjp2zzv/


可能是div无法监听键盘相关事件吧

【热门文章】
【热门文章】