zoukankan      html  css  js  c++  java
  • jQuery元素绑定事件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="d1" class="c">嘎嘎</div>
            <div id="d2" class="c">咕咕</div>
            用户名:<input type="text" name="username" id="username" value="" />
            <button type="button" id="b1">我是一个按钮</button>
            <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script>
            <script type="text/javascript">
                document.getElementById("d1").onclick = function(){
                    //todo
                    alert("我是js原生绑定点击事件");
                }
                $("#d2").click(function(){
                    alert("我是jQuery绑定点击事件");
                })
                /* 失去焦点 */
                /* $("#username").blur(function(){
                    alert("blur事件");
                }) */
                /* 得到焦点 */
                /* $("#username").focus(function(){
                    alert("focus事件");
                }) */
                
                /* 键盘事件 */
                /* 键盘按下 */
                /* $("#username").keydown(function(event){
                    alert("keydown事件:"+event.keyCode);
                }) */
                /* 键盘按下 */
                /* $("#username").keypress(function(event){
                    alert("keydown事件:"+event.keyCode);
                }) */
                /* 键盘抬起 */
                $("#username").keyup(function(event){
                    alert("keydown事件:"+event.keyCode);
                })
                
                /* 鼠标事件 */
                /* 鼠标按下 */
                /* $("#b1").mousedown(function(){
                    alert("鼠标按下");
                }) */
                /* 鼠标抬起 */
                /* $("#b1").mouseup(function(){
                    alert("鼠标抬起");
                }) */
                /* 鼠标移动 */
                /* $("#b1").mousemove(function(){
                    alert("鼠标移动");
                }) */
                /* 鼠标移出 */
                /* $("#b1").mouseout(function(){
                    alert("鼠标移出");
                }) */
                /* 鼠标移入 */
                $("#b1").mouseover(function(){
                    alert("鼠标移入");
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    Linux----------自动化运维工具-ansible
    Linux----------自动化运维
    Linux----------集群介绍
    Linux----------集群-LVS
    Linux----------zabbix监控-进阶
    Linux----------zabbix监控基础
    Linux----------mysql主从复制和基于GTID主从复制
    Linux----------mysql主从及高可用
    MongoDB笔记(四)基本管理命令
    MongoDB笔记(三)启动命令mongod的参数
  • 原文地址:https://www.cnblogs.com/qilin20/p/12669372.html
Copyright © 2011-2022 走看看