[jQuery] 高级事件

<input type="submit" value="提交" />
    <input type="button" value="点击" />
    <div class="d1">
        <div class="d2">
            <div class="d3">
                div
            </div>
        </div>
    </div>
 $(function () {


        $("input").click(function () {
            alert("点击");
        });

        $("input").trigger("click");  // 模拟用户点击

        $("input").click(function () {
            alert("点击");
        }).trigger("click");  // 模拟用户点击  只模拟一次

        $("input").click(function () {
            alert("点击");
        }).click();  // 相当于trigger

        $("input").click(function (e, date1, date2) {
            alert(date1 + '|' + date2);
        }).trigger("click", ['123', 'abc']);  //trigger 额外数据,只有一条的时候,可以省略中括号,多条不能省略,第二条之后就无法识别了。

        $("input").click(function (e, date1, date2, date3, date4) {
            alert(date1 + '|' + date2 + '|' + date3[1] + '|' + date4.user);
        }).trigger("click", ['123', 'abc', ['a', 'b', 'c'], { user: "Lee" }]);

        $("input").bind("click", { user: 'Lee' }, function (e, date1, date2, date3, date4) {
            alert(date1 + '|' + date2 + '|' + date3[1] + '|' + date4.user + '|' + e.data.user);
        }).trigger("click", ['123', 'abc', ['a', 'b', 'c'], { user: "Lee" }]);

        $("input").bind("myEvent", function () {
            alert("点击");
        }).trigger("myEvent");  //执行自定义事件

        $("input").click(function () {
            alert("点击");
        }).click();  // 相当于trigger

        //trigger 提交后跳转,没有阻止默认行为
        $("form").trigger('submit');

        $('form').submit(function (e) {
            e.preventDefault();  //阻止默认行为
        }).trigger('submit');

        $("input").click(function () {
            alert("点击");
        }).trigger("click").css("color", "red");    //返回JQuery对象,实现连缀

        $("div").bind("myEvent", function () {
            alert("自定义事件");
        })
        $(".d3").trigger("myEvent");  //会冒泡
        $("div").bind("myEvent", function () {
            alert("自定义事件");
        });

        $(".d3").triggerHandler("myEvent");  //不会冒泡

        $("input").bind("click.abc", function () {
            alert("abc");
        });
        $("input").bind("click.xyz", function () {
            alert("xyz");
        });
        $("input").bind("mouseover.abc", function () {
            alert("abc");
        });
        $("input").unbind("click.abc");  //移除click.abc 事件
        $("input").unbind(".abc");  //移除所有.abc 事件



    })

 

posted @ 2018-03-13 10:45  晓涵在路上  阅读(172)  评论(0编辑  收藏  举报