如何透過jQuery為一個元素添加點擊和雙擊事件-js教程-PHP中文網

如何透過jQuery為一個元素添加點擊和雙擊事件

藏色散人

發布： 2021-08-27 11:09:30

原創

2516 人瀏覽過

在上一篇《使用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

bind()語法是$(selector).bind(event,data,function,map)

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

登入後複製

appendTo()語法是$(content) .appendTo(selector)

参数分别表示：
content必需。规定要插入的内容（可包含 HTML 标签）。
selector必需。规定把内容追加到哪个元素上。

登入後複製

註：

自jQuery 版本1.7 起，on() 方法是將事件處理程序的首選方法。

append() 和 appendTo() 方法執行的任務相同；不同之處在於：內容和選擇器的位置，以及 append() 能夠使用函數來附加內容。

最後給大家推薦《JavaScript基礎教學》~歡迎大家學習~

以上是如何透過jQuery為一個元素添加點擊和雙擊事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何透過jQuery為一個元素添加點擊和雙擊事件