JQuery の Bind() 関数を深く理解します。-jsチュートリアル-php.cn

JQuery の Bind() 関数を深く理解します。

巴扎黑

リリース： 2017-06-25 11:03:15

オリジナル

1577 人が閲覧しました

この記事では、JQuery での Bind() イベントの使い方を主に紹介し、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パラメータはオプションのパラメータですが、通常はほとんど使用されません。このパラメーターが指定されている場合、追加情報を

イベントハンドラー

関数に渡すことができます。このパラメータは、クロージャによって引き起こされる問題に対処するために有効に使用されます。後で例を示します。 Handlerはバインドに使用される処理番号であり、実際にはデータを処理した後の対応するメソッドである

コールバック関数

でもあります。

1. 最初の単純なバインド()イベント---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」がポップアップし、ボタンを離れると p が表示されることです。

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

ログイン後にコピー

このコードページは、ボタンをクリックすると「Hello World」が表示され、離れると p が表示されます。 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 オブジェクトをクリックしたときに、ページを基準とした現在の座標を spam タグに表示することです。ここではイベントが使用されています。事件。パラメータを渡します。

4.unbind() イベント

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

<body onclick="MyBodyClick()">
 <p onclick="MyClickOut()">
  <p onclick="MyClickInner()">
   <span id="MySpan">I love JQuery!! </span>
  </p>
 </p>
 <span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
 alert("outer p");
}
function MyClickInner() {
 alert("Inner p");
}
function MyBodyClick() {
 alert("Body Click");
}
var foo = function () {
 alert("I&#39;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" ? 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()">
 <p onclick="MyClickOut()">
  <p onclick="MyClickInner()">
    <span id="MySpan">
     I love JQuery!!
    </span>
  </p>
 </p>
</body>
<script type="text/javascript">
 function MyClickOut() {
  alert("outer p");
 }
 function MyClickInner() {
  alert("Inner p");
 }
 function MyBodyClick() {    
  alert("Body Click");
 }
 $(function () {
  $("#MySpan").bind("click", function (event) {
   alert("I&#39;m span");
   event.stopPropagation();
 });
</script>

ログイン後にコピー

以上がJQuery の Bind() 関数を深く理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。