JQuery_jquery での Bind() イベントの使用法の分析-jsチュートリアル-php.cn

JQuery_jquery での Bind() イベントの使用法の分析

WBOY

リリース： 2016-05-16 16:01:01

オリジナル

1102 人が閲覧しました

この記事では、JQuery での Bind() イベントの使用法を例とともに分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

まずその定義を見てみましょう:

.bind( eventType [, eventData], handler(eventObject))

ログイン後にコピー

.Bind() メソッドの主な機能は、バインドされたオブジェクトにいくつかのイベントメソッドの動作を提供することです。この用語における 3 つのパラメーターの意味は次のとおりです:

eventType は文字列型のイベントタイプであり、バインドする必要があるイベントです。このようなタイプには、ブラー、フォーカス、フォーカスイン、フォーカスアウト、ロード、サイズ変更、スクロール、アンロード、クリック、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress が含まれます。、キーアップ、エラー。ここで注意する必要があるのは、ここでは JQuery ではなく JavaScript のイベントメソッドが使用されているということです。JQuery のイベントメソッドはすべて、onclick、onblur など、JavaScript の前に追加の「on」を付けています。

eventData パラメータはオプションのパラメータですが、通常はほとんど使用されません。このパラメータが指定されている場合、追加情報をイベントハンドラ関数に渡すことができます。このパラメータは、クロージャによって引き起こされる問題に対処するために非常に有効に使用されます。後で例を示します。

ハンドラーはバインドに使用される処理番号であり、実際にはデータを処理した後の対応するメソッドであるコールバック関数でもあります。

1. 最初の単純なbind()イベント---Hello Word

<input id="BtnFirst"type="button"value="Click Me"/>
<script>
$(function () {
 $("#BtnFirst").bind("click",function(){
  alert("Hello World");
 });
})
</script>

ログイン後にコピー

ページを開いた後、「Click Me」ボタンをクリックすると、「Hello World」がポップアップ表示されます。これは最も単純なバインディングイベントです。とてもシンプルです。

2. 複数のイベントをバインドします

bind() を通じて複数のイベントをバインドできます (実際、これは JQuery と Linq の非常に有名なチェーンプログラミングです)。実装されている主な機能は、クリックすると「Hello World」がポップアップし、ボタンを離れると div が表示されることです。

<div>
<input id="BtnFirst"type="button"value="Click Me"/></div>
<div id="TestDiv"style=" width:200px; height:200px; display:none; ">
</div>
<script>
$(function () {
 $("#BtnFirst").bind("click", function () {
  alert("Hello World");
 }).bind("mouseout", function () {
  $("#TestDiv").show("slow");
 });
})
</script>

ログイン後にコピー

このコードページは、ボタンをクリックすると「Hello World」が表示され、終了すると div が表示されます。 JQuery のアニメーションでは、「遅い」、「速い」、「標準」を使用できます。もちろん、関連するミリ秒を設定することもできます。

3.bind() イベントオブジェクト

ハンドラーコールバック関数はパラメーターを受け入れることができます。この関数が呼び出されるとき、JavaScript イベントオブジェクトがパラメーターとして渡されます。

このイベントオブジェクトは、通常は不要なパラメーターなので省略できます。イベントハンドラー関数がバインドされていると、トリガーされたときに何をすべきかが明確にわかり、通常は十分な情報が取得できるためです。ただし、場合によっては、イベントの初期化中にユーザーの環境に関する詳細情報を取得する必要があります。

JQuery 公式 Web サイトから例を示します:

<style> 
 p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
 p.over {background:#ccc;}
 span {color:red;}
</style>
<p>Click or double click here.</p>
<span></span>
<script>
 $("p").bind("click", function(event){
  var str = "( " + event.pageX + ", " + event.pageY + " )";
  $("span").text("Click happened! " + str);
 });
 $("p").bind("dblclick", function(){
  $("span").text("Double-click happened in " + this.nodeName);
 });
 $("p").bind("mouseenter mouseleave", function(event){
  $(this).toggleClass("over");
 });
</script>

ログイン後にコピー

ここでの主な機能は、ユーザーが p オブジェクトをクリックしたときに、span タグ内のページを基準とした現在の座標を表示することです。ここでは、event イベントが使用されます。パラメータを渡します。

4.unbind() イベント

unbind([type],[data],Handler) は、bind() の逆の操作で、一致する各要素からバインドされたイベントを削除します。パラメータがない場合は、バインドされたイベントがすべて削除されます。 bind() を使用して登録したカスタムイベントのバインドを解除できます。イベントタイプがパラメータとして指定された場合、そのタイプのバインドされたイベントのみが削除されます。バインド時にハンドラーが 2 番目の引数として渡された場合、その特定のイベントハンドラーのみが削除されます。

<body onclick="MyBodyClick()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
   <span id="MySpan">I love JQuery!! </span>
  </div>
 </div>
 <span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
 alert("outer Div");
}
function MyClickInner() {
 alert("Inner Div");
}
function MyBodyClick() {
 alert("Body Click");
}
var foo = function () {
 alert("I'm span.");
}
$(function () {
 $("#MySpan").bind("click", foo);
})  
$(function () {
 $("#LooseFocus").unbind("click", foo);
})
</script>

ログイン後にコピー

上記のコードも、ユーザーのマウスがスパン上に留まると、スパンのクリックイベントがキャンセルされます。つまり、最終的には体内でアラートがポップアップするだけになります。

最後に、one() イベントの使用法を簡単に理解しましょう。実際、one と binding は同じであり、どちらもバインディングイベントに対して生成されます。 1 つは、bind と基本的に同じです。違いは、jQuery.event.add を呼び出すときに、登録されたイベント処理関数がわずかに調整されることです。 1 つは、受信イベント処理関数をプロキシするために jQuery.event.proxy と呼ばれるものです。イベントによってこのエージェントの関数の呼び出しがトリガーされると、まずイベントがキャッシュから削除され、次に登録されたイベント関数が実行されます。 fn で登録したイベント関数の参照を取得するクロージャの適用例です。

使用規則:

one(type,[data],fn)

ログイン後にコピー

一致した要素ごとに、ワンタイムイベントハンドラーを特定のイベント (クリックなど) にバインドします。このイベントハンドラーは、各オブジェクトに対して 1 回だけ実行されます。その他のルールはbind()関数と同じです。このイベントハンドラーは、デフォルトの動作を防ぐために使用できるイベントオブジェクトを受け取ります。デフォルトの動作をキャンセルしてイベントのバブリングを防止したい場合は、イベントハンドラーが false を返す必要があります。

bind と one のそれぞれのコードの実装を投稿すると、読者は簡単に比較できます。

Bind() コード実装:

bind : function(type, data, fn) { 
 return type == "unload" &#63; this.one(type,data,fn) : this.each(function(){
 //fn || data, fn && data实现了data参数可有可无 
  jQuery.event.add(this, type, fn || data, fn && data); 
 }); 
}

ログイン後にコピー

One() コードの実装:

one : function(type, data, fn) { 
 var one = jQuery.event.proxy(fn || data, function(event) { 
  jQuery(this).unbind(event, one); 
  return (fn || data).apply(this, arguments);
 //this->当前的元素 
 }); 
 return this.each(function() { 
  jQuery.event.add(this, type, one, fn && data); 
 }); 
}

ログイン後にコピー

5.最后呢，其实想在贴一个冒泡事件，因为在处理绑定事件的时候，如果调用内部的事件有可能会触发外面的事件，所以给大伙一个借鉴吧。

这里可以参考一下javascript事件冒泡的文章：《JavaScript 事件冒泡简介及应用》。

简单的说，何为冒泡事件？其实，简单的理解是，也可以说是事件传播，它会从内部的控件广播到父类的元素，然后接着一直往上到祖先级别的元素。

则冒泡实例代码：

<body onclick="MyBodyClick()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
    <span id="MySpan">
     I love JQuery!!
    </span>
  </div>
 </div>
</body>
<script type="text/javascript">
 function MyClickOut() {
  alert("outer Div");
 }
 function MyClickInner() {
  alert("Inner Div");
 }
 function MyBodyClick() {    
  alert("Body Click");
 }
 $(function () {
  $("#MySpan").bind("click", function (event) {
   alert("I'm span");
   event.stopPropagation();
 });
</script>

ログイン後にコピー

希望本文所述对大家的jQuery程序设计有所帮助。