JS事件

来源：互联网发布：淘宝最新刷销量方法编辑：程序博客网时间：2024/05/22 03:10

事件：

键盘事件：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script>        window.onload=function(){            //键盘按下并松开,            window.onkeypress=function(e){              //  alert(e.key);//key:按键的内容，按下什么就会打印出来什么                if(e.charCode==103){                    alert('G被点击');                }            }        }    </script></head><body></body></html>

鼠标事件：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script>        window.onload=function(){            //单击            var input=document.getElementById('b');           input.onclick=function(){                alert('2333')            }            //双击            var c=document.getElementById('c');            c.ondblclick=function(){                alert('66666');            }        }    </script></head><body><input type="button" id="b" value="点击"/><input type="button" id="c" value="双击"/></body></html>
HTML事件：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script>        window.onload=function(){            //获取元素            var a=document.getElementById('a');          var b=document.getElementById('b');            //内容发生改变，并转移焦点后才能被监听到            d.onchange=function(){                alert('内容发生了改变');            }            //添加一个内容改变监听事件            a.oninput=function(){                //将a的输入框内容传给b                b.innerText= a.value;            }
          如图：
             
                        //兼容ie9以下的版本            a.onpropertychange=function(){                b.innerText= a.value;            }        }    </script></head><body><input type="text" id="a" value=""><div id="b"></div></input></body></html>
实例：动态改变页面
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        img{            margin:10px 10px;        }        .a{            border: 1px solid gray;        }        .b{            border: 3px 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="../img/new_01.jpg" alt=""/><img  class="a" src="../img/new_02.jpg" alt=""/><img  class="a" src="../img/new_03.jpg" alt=""/></body></html>

阅读全文

0 0