jQueryでbind()メソッドを使用する方法

この記事では、jQuery のイベント バインディングの binding() メソッドについて共有します。これには一定の参考価値があり、皆さんの学習に役立つことを願っています。

jQuery がイベントを処理する 2 つの最も重要な方法は、イベント バインディングの binding() メソッドと、要素のグループの 1 つ以上のイベントにコードを追加するイベント削除の unbind() メソッドです。 bind() メソッドの使用方法については、後で詳しく説明します。

bind() メソッド

bind() メソッドは、選択した要素に 1 つ以上のイベント ハンドラーを追加します。そして、イベントが発生したときに実行する関数を指定します。

$(selector).bind(event,data,function)

event: 要素に追加する 1 つ以上のイベントを指定します。複数のイベントはスペースで区切ることができます。有効なイベントである必要があります。

data: 関数に渡される追加データを指します。

関数: イベントの発生時に実行される関数を指します。

Example

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){//入口函数
$("a").bind("click", function() {

alert($(this).text());

});
});

Result

When aリンクがクリックされる リンクがクリック イベントにバインドされている場合、クリックされたときにコンテンツを表示するボックスが表示され、jQuery はクリックされた要素を匿名関数の "this" キーワードに自動的に割り当て、アクティブ化する要素へのアクセスを許可します。同時に、複数のイベントをトリガーできます

<div id="div" style="background-color:pink;width:100px;height:100px;"></div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$("#div").bind("mousemove", function(event){
$(this).text(event.pageX + "," + event.pageY);});

Result

長さと幅が 100 ピクセルでピンクの div 要素を作成します。 。この div では、「event」というパラメーターを持つ匿名関数を使用して、mousemove イベントをバインドします。マウスをロールオーバーすると、ページ上のマウス カーソルが現在どこにあるかを示す pageX プロパティと pageY プロパティにアクセスできます。ボックスの左上隅に示されているように。カーソルを div 要素の別の場所に移動すると、さまざまな値が更新されて表示されることがわかります。

bind() メソッドは、data を通じて独自のデータを渡し、イベント オブジェクトにアクセスさせることもできます。 、またはバインディングで使用できます。イベントが指定されたときに値を設定し、イベントが呼び出されたときにこの値を読み取ることができます。

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
	var text = "Hello, world!";
	$(function(){
	$("a").bind("click", {message:text},function(event) {
	text = "hello";
	console.log(event.data.message);
	});});
</script>
	</script>

Result

値はbind()メソッドの補助パラメータとして使用します。キーと値のマップとして渡され、複数の値をカンマで区切って渡します。イベントオブジェクトのdataプロパティを使用します。このプロパティには、渡された各値のサブプロパティが含まれています。つまり、event.data.message を使用してメッセージ パラメーターの値にアクセスできます。イベントハンドラ内で「text」変数の値が変更されていますが、プログラムの実行結果は「Hello, world!」のままです。

まとめ： 以上がこの記事の内容です。皆さんも jQuery イベント バインディングを学んでください。それは間違いなく役に立ちます。

以上がjQueryでbind()メソッドを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。