<style>
/* 标签获取鼠标焦点时,执行的css样式 */
/* 平时颜色 */
input{
color:pink;
}
/* 获取焦点颜色 */
input:focus{
color:red;
}
/* 鼠标经过颜色 */
input:hover{
color: blue;
}
/* 鼠标按住效果 */
input:active{
color: yellow;
}
</style>
</head>
<body>
<div>我是div</div>
<input name="f" type="text">
<textarea name="f" ></textarea>
<select name="f">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<button name="f">按钮</button>
<a href="JavaScript:;" name="f">超链接</a>
<script>
// 键盘事件
// 键盘事件绑定事件标签对象,不能随便定义
// 1,只有可以被选中的标签可以绑定
// 也就是 css样式中 可以获取鼠标焦点的标签,才支持键盘事件
// input , textarea , select , button , a超链接
// 2,document可以被绑定
// 事件类型
// keydown 键盘按下
// keyup 键盘抬起
// 鼠标按下事件,一直按住只会触发一次
// 键盘按下事件,一直按住会一直触发
var oDiv = document.querySelector('div');
// 点击事件,什么标签都可以绑定
oDiv.onclick = function(){
console.log(123);
}
oDiv.onkeydown = function(){
console.log(456);
}
var oEles = document.querySelectorAll('[name="f"]');
oEles.forEach(function(item){
item.onkeydown = function(){
console.log('键盘按下');
}
})