• 技术文章 >web前端 >js教程

    如何通过jQuery给一个元素添加单击和双击事件

    藏色散人藏色散人2021-08-27 11:09:30原创195
    在上一篇《使用JavaScript从数组中删除最后一项(3种方法)》中给大家介绍了怎么使用JavaScript从数组中删除最后一项,感兴趣的朋友可以去学习了解一下~

    本文讲解的重要内容是通过jQuery将单击和双击事件添加到元素中的方法。

    在本文中我们将通过bind() 方法添加单击和双击事件。bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。此外,我们还会使用appendTo() 方法将结果添加到元素,appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

    下面我们直接上代码:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $(".clickable_ele").bind("click", function () {
                    $("<h4>调用单击事件</h4>")
                        .appendTo(".res");
                });
    
                $(".clickable_ele").bind("dblclick", function () {
                    $("<h4>调用双击事件</h4>")
                        .appendTo(".res");
                });
            });
        </script>
        <style>
            body {
                text-align: center;
            }
    
            h1 {
                color: #ff311f;
            }
    
            .clickable_ele {
                font-size: 20px;
                font-weight: bold;
                color: #ff7800;
            }
    
        </style>
    </head>
    
    <body>
    <h1>PHP中文网</h1>
    
    <h3>
        如何给一个元素添加单击和双击事件?
    </h3>
    
    <div class="clickable_ele">
        可点击的元素
    </div>
    
    <div class="res"></div>
    </body>
    </html>

    效果如下:

    GIF 2021-8-27 星期五 上午 10-58-23.gif

    参数分别表示:
    event必需。规定添加到元素的一个或多个事件。
    由空格分隔多个事件值。必须是有效的事件。
    data可选。规定传递到函数的额外数据。
    function必需。规定当事件发生时运行的函数。
    map规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
    参数分别表示:
    content必需。规定要插入的内容(可包含 HTML 标签)。
    selector必需。规定把内容追加到哪个元素上。

    注:

    自 jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的首选方法。

    append() 和 appendTo() 方法执行的任务相同;不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。

    最后给大家推荐《JavaScript基础教程》~欢迎大家学习~

    以上就是如何通过jQuery给一个元素添加单击和双击事件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:jQuery
    上一篇:深入了解Node.js util模块的promisify()方法 下一篇:如何用 jQuery 为段落元素设置动画
    线上培训班

    相关文章推荐

    • jquery如何通过id修改css• jquery怎么修改元素css属性值• 你值得了解的JavaScript“继承之jquery”使用方法(代码详解)• 如何使用jQuery创建彩色条纹表格效果?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网