DOM事件监听:键盘和鼠标

来源:互联网 发布:擦除上网痕迹软件 编辑:程序博客网 时间:2024/06/06 03:16

鼠标事件:

<!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>