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");
阅读全文
0 0
- jQuery高级事件---模拟操作和命名空间
- JQ高级事件之模拟与命名空间
- jQuery事件命名空间
- jquery事件命名空间
- jQuery 事件的命名空间
- jQuery 事件的命名空间
- JQuery 中的事件命名空间
- jQuery中事件命名空间
- jQuery中事件命名空间
- 谈谈jquery的事件名称和命名空间
- 谈谈jquery的事件名称和命名空间
- 【jQuery学习笔记-----jQuery事件命名空间】
- jQuery 高级事件(模拟操作)不点击(触发)事件触发操作
- jQuery绑定事件的命名空间
- jQuery的事件绑定命名空间
- Jquery中神奇的事件命名空间
- jQuery 自定义事件以及命名空间
- jquery的事件命名空间详解
- day05
- IO中读取文件并将数字相加
- socket select
- typeid的使用方法
- VirtualBox 共享文件夹设置 及 开机自动挂载
- jQuery高级事件---模拟操作和命名空间
- CentOS上运行BeyondCompare
- sql逐条更新表数据
- 工具类之LocationUtils(定位工具类)
- eclipse 开发工具下载
- Spring+quartz实现定时任务实例
- springboot + birt Design Engine API,Report Engine API
- IntelliJ IDEA搭建SpringBoot应用完成的一个小Demo
- js判断浏览器信息大全