zoukankan      html  css  js  c++  java
  • JavaScript(js)处理的HTML事件、键盘事件、鼠标事件

     


    示例代码:

    HTML文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HTML文件</title>
    <script>
    window.onload=function () {
    var d=document.getElementById('d');
    //内容发生改变,并焦点发生改变,才可以监听到
    d.onchange=function () {
    alert('内容发生改变')
    }
    }
    </script>
    </head>
    <body>
    <input type="text" id="d" value="">
    </body>
    </html>
    键盘事件:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script>
    window.onload=function () {
    window.onkeypress=function (e) {
    // alert(e.key)//弹出按键对应的字母
    // alert(e.keyCode)
    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('按钮被点击了');
    }

    var c= document.getElementById('c');
    c.ondblclick=function () {
    alert('双击')
    }
    }
    </script>
    </head>
    <body>
    <input type="button" id="b" value="点击">
    <input type="button" id="c" value="双击">
    </body>
    </html>

  • 相关阅读:
    假期第九天
    假期第八天
    8.9周总结
    构建之法阅读笔记之三
    构建之法阅读笔记之二
    构建之法阅读笔记之一
    03人月神话阅读笔记之一
    手机输入法使用评价
    十天冲刺-第十天
    十天冲刺-第九天
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/10605439.html
Copyright © 2011-2022 走看看