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

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73335845 模拟操作trigger() 浏览器自行触发事件.例如:当网页加载完毕后浏览器自行点击一个按钮触发一个事件,而不是用户去点击。
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73335845

模拟操作

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 resize
change focusout mousenter scroll
click keydown mouseleave select
dblclick keypress mousemove submit
error keyup mouseout unload
focus 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");
相关文章
N..
|
2月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
13 1
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
2月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
2月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
9 0
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
3天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
26天前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
7 0
N..
|
2月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1
|
2月前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
2月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
10 0