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>

  • 相关阅读:
    [UE4]Image
    [UE4]CheckBox
    [UE4]Button
    [UE4]Border
    [UE4]RichTextBlock
    [UE4]Text Box
    [UE4]字体材质
    [UE4]Retainer Box
    [UE4]Invalidation Box
    [UE4]Dynamic Entry Box
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/10605439.html
Copyright © 2011-2022 走看看