jquery的自訂事件通過on綁定trigger觸發

標籤：code   事先   property   ann   .com   jquer   inpu   回調   use   

jquery綁定自訂事件，可以實現預先綁定好一個處理方法，當需要使用的時候利用jquery trigger來觸發自訂事件，以達到方便快捷的目的。
我們來假設一個這樣的情境，一個textarea中的字數計算，如果是直接鍵盤輸入或者粘貼進來的話，是可以使用input方法檢測到，但是如果是通過js插入的文本，這個時候input事件就監測不到了，
這個時候如果我們事先給綁定一個myChange事件，它的回呼函數就是來處理計算其中的文本字數的，我們在使用js給這個textarea賦值以後，連綴寫上.trigger("myChange")就可以計算到。

測試代碼：

<textarea id="textarea"></textarea><p><button type="button" id="btn1">jquery自訂事件-事件註冊</button></p><p><button type="button" id="btn2">jquery自訂事件-測試觸發</button></p><p style="margin-top: 100px;"><a href="http://www.51xuediannao.com/">懶人建站</a>http://www.51xuediannao.com/整理</p><script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script><script>    $btn1 = $("#btn1");    //jquery定義一個自訂事件 diyEvent  注意：回呼函數中的第一個參數是事件，需要接受其他參數的話，在後面跟上其他參數即可  不太好表述，仔細對照“調用樣本”能看明白    $btn1.on("diyEvent",function(event,a,b,fun){        console.log(a,b);        fun();    });     //jquery自訂事件觸發樣本, 注意: trigger傳入的參數第一個是自訂的事件名，第二個參數是一個數組，數組中的項會和自訂事件中回調的參數項對應    $("#btn2").click(function(){        $btn1.trigger("diyEvent",["11","22",function(){alert("懶人建站")}])    }) //我們來測試一下 textarea 這個情境    var haHa = function(){        var test = function($el){            var len= $el.val().length;            console.log(len)        };        $("#textarea").on("input propertychange",function(){            test($(this));        }).on("myChange",function(){            test($(this));        });    };    haHa();     $btn1.click(function(){        $("#textarea").val("jquery的自訂事件通過on綁定trigger觸發").trigger("myChange")    })</script>

本文連結：jquery的自訂事件通過on綁定trigger觸發http://www.51xuediannao.com/js/jquery/832.html

jquery的自訂事件通過on綁定trigger觸發