您的位置：首页 > 其它

DOM事件监听：键盘和鼠标

2017-07-25 14:21 344 查看


鼠标事件：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
margin: 10px;
}
.a{
border: 1px solid gray;
}
.b{
border: 5px solid red;;
}

</style>
<script>
window.onload =function(){

var img = document.getElementsByTagName('img');
/*循环设置每一个元素的鼠标事件*/
for( var i = 0; i <= img.length ; i++){
/*鼠标进入这个元素*/
img[i].onmouseover = function(e) {
e.target.className = 'b';
}
//鼠标离开这个元素时
img[i].onmouseout = function(e){
e.target.className = 'a';
}
}
}
</script>
</head>
<body>
<img class="a" src="new_01.jpg" alt=""/>
<img class="a" src="new_02.jpg" alt=""/>
<img class="a" src="new_03.jpg" alt=""/>
</body>
</html>


键盘事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script type="text/javascript">
window.onload=function() {
window.onkeypress=function(e) {
//按键键码
if(e.charCode==103) {
alert('G健被点击')
}
}
}
</script>
</head>
<body>

</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航