jquery绑定自定义事件

jquery绑定自定义事件，可以实现预先绑定好一个处理方法，当需要使用的时候利用jquery trigger来触发自定义事件，以达到方便快捷的目的。
我们来假设一个这样的场景，一个textarea中的字数计算，如果是直接键盘输入或者粘贴进来的话，是可以使用input方法检测到，但是如果是通过js插入的文本，这个时候input事件就监测不到了，
这个时候如果我们事先给绑定一个myChange事件，它的回调函数就是来处理计算其中的文本字数的，我们在使用js给这个textarea赋值以后，连缀写上.trigger("myChange")就可以计算到。

下面的jquery自定义事件只是一个简单测试。有需要的朋友可以尝试着做些更实用的功能

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