网页事件交互实例-优快云博客

本文链接：https://blog.youkuaiyun.com/ztt0918/article/details/76038526

事件：

键盘事件：

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

JS事件