jQuery高级事件---模拟操作和命名空间

来源:互联网 发布:每天读书 知乎 编辑:程序博客网 时间:2024/05/21 07:05

模拟操作

trigger()
浏览器自行触发事件.例如:当网页加载完毕后浏览器自行点击一个按钮触发一个事件,而不是用户去点击。

    $("input").click(function(){        alert("自行点击事件");    });    $("input").trigger("click");

也可以简写为:

    $("input").click(function(){        alert("自行点击事件");    }).trigger("click");

传递数据

给事件执行传递参数,这个参数类似与 event.data的额外数据,可以是数字、字符串、数组、对象。
当传递一条数据时可以省略中括号,多条必须加上中括号,中括号不表示数组,只是一个标识

传递一条参数:

    $("input").click(function(){        alert("自行点击事件");    });    $("input").trigger("click");

传递一条参数的简写:

    $("input").click(function(e,data1){        alert(data1);    }).trigger("click","sss");

传递多条参数:

    $("input").click(function(e,data1,data2,data3){        alert(data1+data2+data3);    }).trigger("click",["sss",1,2]);

传递数组:

    $("input").click(function(e,data1,data2,data3){        alert(data1+data2+data3[0]);    }).trigger("click",["sss",1,[1,2,3]]);

传递对象:

    $("input").click(function(e,data1,data2,data3){        alert(data1+data2+data3.user);    }).trigger("click",["sss",1,{user:'tom'}]);

bind也可同时传递数据,但是bind需要从event中获得:

    $("input").bind("click",{user:"tom"},function(e,data1,data2,data3){        alert(e.data.user+data1+data2+data3.user);    }).trigger("click",["sss",1,{user:'tom'}]);

自定义事件

可以通过自定义的事件触发相关函数,所谓自定义事件其实就是执行被.bind()绑定的函数

    $("input").bind("myEvent",function(){        alert("这是一个自定义事件");    }).trigger("myEvent");

简写方案

trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个
空的同名事件即可,例如:trigger("click") ---> click()。几乎所有事件都有简写方式:

blur focusin mousedown resizechange focusout mousenter scrollclick keydown mouseleave selectdblclick keypress mousemove submiterror keyup mouseout unloadfocus load mouseover

triggerHandler()

1.触发事件,但不会执行默认行为

trigger执行表单提交时会触发默认事件,自动跳转

    $("form").submit().triggle("submit");// 等效的用法:    $("form").triggle("submit");

triggerHandler()提交表单但是不会自动跳转

$("form").triggleHandler("submit");

2.triggerHandler()只会触发第一个元素的事件,而trigger会触发所有满足条件的元素的事件。

    $(":button").click(function(){ // 只会执行第一个按钮的事件        alert("###");    }).triggerHandler("click");

3.trigger返回jQuery对象,triggerHandler()返回事件的返回值。所以triggerHandler不能用链式使用

    var reuslt = $(":button").click(function(){        alert("###");        return 123;                 // 如果没有return则triggerHandler返回undefined    }).triggerHandler("click");    alert(reuslt);      // 123

4.trigger会冒泡,triggerHandler不会冒泡

    $("div").click(function(){        alert("div");    });    $(":button:eq(0)").click(function(){        alert("aaa");    }).triggerHandler("click");

命名空间

click.abc
常常使用给事件绑定匿名函数。但是匿名函数不方便移除。因此使用命名空间可以给每一个匿名函数一个对应的命名,方便控制

只会删除click.abc对应的函数:

    $(":button:eq(0)").bind("click.abc",function(){alert("abc")});    $(":button:eq(0)").bind("click.xyz",function(){alert("xyz")});    $(":button:eq(0)").unbind("click.abc");

删除所有abc对应的函数:

    $(":button:eq(0)").bind("click.abc",function(){alert("abc")});    $(":button:eq(0)").bind("mouseenter.abc",function(){alert("abc")});    $(":button:eq(0)").unbind(".abc");

trigger 和 triggerHandler也可以使用命名空间:

    $(":button:eq(0)").bind("click.abc",function(){alert("abc")});    $(":button:eq(0)").triggerHandler("click.abc");
原创粉丝点击