1. 程式人生 > >jquery的自定義事件通過on綁定trigger觸發

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

測試 觸發 調用示例 事件觸發 我們 trigge spa src margin

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觸發