zoukankan      html  css  js  c++  java
  • JavaScript——事件

    事件:是由访问Web页面的用户引起一系列操作。

    键盘事件

    HTML事件

    鼠标事件

    事件的作用:用于浏览器和用户的交互


    以下代码为相关试验代码:

    HTML事件:

    <script type="text/javascript">
        window.onload = function(){
            //获取元素
            var a = document.getElementById('a');
            var b = document.getElementById('b');
            //添加一个内容改变监听事件
            a.oninput = function(){
                //把a的文本输入框内容覆盖给b
                b.innerText = a.value;
            }
            //兼容IE9以下版本
            a.onpropertychange= function(){
                //把a的文本输入框内容覆盖给b
                b.innerText = a.value;
            }
        }
    </script>
    
    <body>
    <input type="text" id="a" value=""/>
    <div id="b"></div>
    </body>

    键盘事件

    <script type="text/javascript">
       window.onload=function() {
          window.onkeypress=function(e) {
             //按键键码
             if(e.charCode==103) {
                alert('G健被点击')
             }
          }
       }
    </script>

    鼠标单击、双击事件

    <script>
        window.onload = function() {
            function dbl(){
                alert('按钮被双击');
            }
        var input = document.getElementById('b');
        input.onclick = function() {
            alert('按钮被点击');
        }
            var c = document.getElementById('c');
          /*  c.ondblclick = function(){
                alert('按钮被双击');*/
    
    
                c.ondblclick = dbl;
            }
           }
    </script>
    
    <body>
    <input type="button" id="b" value="点击"/>
    <input type="button" id="c" value="点击"/>
    </body>
  • 相关阅读:
    阅读任务
    自我介绍
    学习总结
    第十二周课程总结
    第十一周课程总结
    第十周课程总结
    第九周课程总结&实验报告(七)
    第四周课程总结&实验报告
    第3周Java编程总结
    学习总结
  • 原文地址:https://www.cnblogs.com/aixing/p/13327763.html
Copyright © 2011-2022 走看看