javascript事件处理中Event对象（键盘事件和鼠标事件）实例

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>辅助键及鼠标</title>
<style type="text/css">
*{margin:0}
#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
</style>
<script type="text/javascript">
function changeColor(){
if(event.altKey){
document.getElementById('layer').style.backgroundColor='red';
}
}
<span style="color:#ff0000;">document.onkeydown = changeColor;//很重要</span>
function mouseDown(){
if(event.button == 1){
document.getElementById('layer').style.backgroundColor='red';
}else if(event.button == 2){
document.getElementById('layer').style.backgroundColor='green';
}else{
document.getElementById('layer').style.backgroundColor='blue';
}
}
<span style="color:#ff0000;">document.onmousedown = mouseDown;</span>
</script>
</head>
<body>

<div id="layer" ><span id="test">吕布信息介绍</span>
</div>

</body>
</html>

具体效果可以自行测试

javascript事件处理中Event对象（键盘事件和鼠标事件）实例

示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>辅助键及鼠标</title>
<style type="text/css">
*{margin:0}
#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
#test{
width:500px;
height:300px;
background:#fba;
}
</style>
<script type="text/javascript">
function getLoc(){
var obj = document.getElementById('layer');
obj.innerText = "clientx="+event.clientX+"x="+event.x+"screenX"+event.screenX;



}
<span style="color:#ff0000;">document.onmousemove = getLoc;</span>


</script>
</head>
<body onload="init()" >
<div id="test"></div>
<div id="layer" ></div>
</body>
</html>

显示效果如下：

javascript事件处理中Event对象（键盘事件和鼠标事件）实例

查看进入元素的tagName

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>辅助键及鼠标</title>
<style type="text/css">
*{margin:0}
#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
#test{
width:500px;
height:300px;
background:#fba;
}
</style>
<script type="text/javascript">
function getLoc(){
var obj = document.getElementById('layer');
obj.innerText = "clientx="+event.clientX+"x="+event.x+"screenX"+event.screenX;
obj.innerText = event.toElement.tagName;


}

document.onmouseover = getLoc;


</script>
</head>
<body onload="init()" >
<div id="test"></div>
<div id="layer" ></div>
</body>
</html>

鼠标进入的时候显示DIV，移出的时候显示HTML

javascript事件处理中Event对象（键盘事件和鼠标事件）实例

键盘监听事件：

.html 代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>辅助键及鼠标</title>
<style type="text/css">
*{margin:0}
#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
#test{
width:500px;
height:300px;
background:#fba;
}
</style>
<script type="text/javascript">
function getLoc(){
var obj = document.getElementById('layer');

obj.innerText = String.fromCharCode(event.keyCode);

}

function init(){

document.onkeydown = getLoc;
}
</script>
</head>
<body onload="init()" >
<div id="test"></div>
<div id="layer" ></div>
</body>
</html>

按下键盘就会显示当前按键

秒客网

javascript事件处理中Event对象（键盘事件和鼠标事件）实例

相关文章