jQuery を使用して要素にクリックイベントとダブルクリックイベントを追加する方法-jsチュートリアル-php.cn

jQuery を使用して要素にクリックイベントとダブルクリックイベントを追加する方法

藏色散人

リリース： 2021-08-27 11:09:30

オリジナル

2578 人が閲覧しました

前回の記事「JavaScriptを使用して配列の最後の項目を削除する(3つの方法)」では、JavaScriptを使用して配列の最後の項目を削除する方法を紹介しました。学んで理解してください~

この記事で説明する重要な内容は、jQuery を介して要素にクリックイベントとダブルクリックイベントを追加する方法です。

この記事では、bind() メソッドを通じてクリックイベントとダブルクリックイベントを追加します。 bind() メソッドは、選択した要素に 1 つ以上のイベントハンドラーと、イベントの発生時に実行する関数を追加します。さらに、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() メソッドは選択されたオブジェクトにイベント処理を追加します。 element プログラムの優先メソッド。

append() メソッドと appendTo() メソッドは同じタスクを実行しますが、相違点は、コンテンツとセレクターの位置と、関数を使用してコンテンツを追加する append() の機能です。

最後に、「

JavaScript Basics Tutorial」をお勧めします～皆さんもぜひ学んでください～
以上がjQuery を使用して要素にクリックイベントとダブルクリックイベントを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。