jQueryプレミアムイベント

学習のポイント:

1.シミュレーション動作

2.ネーミングスペース

3.イベント依頼on、off、one

一、シミュレーション操作
1.triggerメソッド

<div style="width:200px;height:200px;background:red;">
    <input type="button" value="  "/>
</div>

$("input").click(function () {
    console.log($(this).val());
});

クリックイベントを自動的にトリガー

$("input").trigger("click");

略記

$("input").click(function () {
    console.log($(this).val());
}).trigger("click");

伝達パラメータ

$("input").click(function (e, data1, data2) {
    console.log(data1['name'] + ", " + data2[1]);
}).trigger("click", [{"name" : "zhang", "age" : 22}, ["lisi", 23]]);    // zhang, 23

は、カスタムイベント$(「input」)を自動的にトリガーすることもできる.bind(「myClick」,function(){console.log(「カスタムイベント」//カスタムイベント}).trigger(“myClick”); 次は略語の書き方を見てみましょう.

$("input").bind("click", function () {
    console.log("       ");     //        
}).click();

2.triggerHandlerメソッド
ほとんどの場合、triggerとtriggerHandlerの2つの方法の使い方は似ているが、違いもある.triggerHandler()メソッドは、イベントのデフォルトの動作をトリガしません.trigger()会

<form action="http://www.baidu.com">
      : <input type="text" name="username"/>
    <input type="submit" name="sub"/>
</form>

$("input[name=sub]").trigger("click");     //        URL
$("input[name=sub]").triggerHandler("click");

triggerでtriggerHanderを真似したいなら

$("input[name=sub]").click(function (e) {
    e.preventDefault();
}).trigger("click");

第2種:.triggerHandler()メソッドは、最初に一致する要素にのみ影響します.trigger()はすべてに影響します

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

$("ul li").click(function () {
    console.log($(this).text());
});
$("ul li").trigger("click");       // 3 li     
$("ul li").triggerHandler("click");    //      li   

第3種:.triggerHandler()メソッドは、現在のイベントで実行する戻り値を返し、戻り値がない場合はundefinedを返します.trigger()は、現在イベントトリガ要素を含むjQueryオブジェクトを返します(チェーン接尾辞呼び出しが便利です)

alert($(document).click(function (){
    return "aaa";       // aaa
}).triggerHandler("click"));
alert($(document).click(function (){
    return "aaa";       // [object Object]
}).trigger("click"));

第4種:.trigger()はイベントを作成するときに泡が立ちます.しかし、このバブルはカスタムイベントでこそ体現され、jQueryがDOMに拡張するメカニズムであり、DOM特性ではない.それでtriggerHandler()は泡が立ちません.

<div style="width: 300px; height: 300px; background: red;">
    <div style="width: 200px; height: 200px; background: green;">
        <div class="inner" style="width: 100px; height: 100px; background: blue;">inner</div>
    </div>
</div>
var index = 1;
$("div").bind("myEvent", function () {
    console.log("index = " + index++);
})
$(".inner").trigger("myEvent");        // index = 1, index = 2, index = 3
$(".inner").triggerHandler("myEvent");     // index = 1

二、ネーミングスペースは、イベントを削除したい場合があります.しかし、同じ名前のエレメントにバインドされたイベントを削除するのは面倒で、この場合、イベントのネーミングスペースを使用して解決することができます.

$(document).bind("click.abc", function () {
    console.log("abc");
})
$(document).bind("click.123", function ()　{
    console.log("123");
});
$(document).unbind("click.abc");       //       click.123
$(document).trigger("click.123");

三、イベント委任は、サブエレメントがバインドされたイベントを親エレメント(または祖先エレメント)にバブルさせ、その後、関連処理を行えばよい.混乱を恐れるため、jqueryはlive()、die()とdelegate()、undelegate()メソッドをon()、off()とone()で統一してイベント委任を行った.

<div style="background:red;width:200px;height:200px;" id="box">
    <input type="button" value="  " class="button" />
</div>

イベントの委任を行う

$(".button").on("click", function () {
    $(this).clone().appendTo("#box");
});

イベントの委任解除

$(".button").off("click");

oneバインド要素の実行が完了すると自動的にイベントを削除し、一度だけイベントをトリガーすることができます.

$(".button").one("click", function () {
    $(this).clone().appendTo("#box");
});