ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery を使用して要素にクリック イベントとダブルクリック イベントを追加する方法
jQuery を使用して要素にクリック イベントとダブルクリック イベントを追加する方法
- 藏色散人オリジナル
- 2021-08-27 11:09:302577ブラウズ
前回の記事「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>結果は次のとおりです:
- ##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 サイトの他の関連記事を参照してください。