键盘事件与onclick事件联动

最近正在模拟一个打鼓的网页，需要使用键盘事件与点击事件，特此记录一下。

键盘事件

• onkeydown  当按下按键时运行脚本
• onkeypress  当按键按下后并松开运行脚本
• onkeyup       当按键松开时运行脚本

小示例：

var div=document.getElementById('div');
		div.onclick=function(){
			this.style.backgroundColor='#000';
			/*使样式回到最初的状态*/
			setTimeout(()=>this.style.backgroundColor='blue',100).bind(this);
		}
		document.onkeydown=function(event){
			var e=event||window.event;
          /*按enter健触发*/
			if (e.keyCode==13) {
				div.click();
			}
		}

这里说一下click方法。

click 方法可以用来模拟鼠标左键单击一个元素。

当在支持click方法的元素上使用该方法时（比如元素），会触发该元素的 click 事件。该事件会一直向文档树的上层元素冒泡，也会触发它们各自的click事件。但是，冒泡而来的事件会让一个  元素像受到真实的鼠标点击一样执行页面的跳转。

 

 

 

如果键盘事件想指定在某一具体的div的话，可以给相应div加tabindex='1'，再将element对象换成该div。

 

 

最后附上以react为基础的一个小例子：

https://codepen.io/1371357219/full/xxZKmWb