ホームページ > 記事 > ウェブフロントエンド > JQuery の Bind() 関数を深く理解します。
この記事では、JQuery での Bind() イベントの使い方を主に紹介し、Bind() イベントの機能、特徴、使用スキルを例とともに分析します。必要な方は参考にしてください。 () イベントの使用法。皆さんの参考に共有してください。具体的な分析は次のとおりです:
まずその定義を見てみましょう:
.bind( eventType [, eventData], handler(eventObject))
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>
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>
ハンドラー このコールバック関数はパラメータを受け取ることができます。この関数が呼び出されるとき、
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>
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'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)
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 : 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'm span"); event.stopPropagation(); }); </script>
以上がJQuery の Bind() 関数を深く理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。