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

藏色散人
リリース: 2021-08-27 11:09:30
オリジナル
2542 人が閲覧しました

前回の記事「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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート