jQuery 中的事件参数传递机制

jQuery事件参数传递模型:
注:trigger 不能与 bind 的原生函数一样,使用同样的参数传递形式;
参数传递一:
$(document).ready(function(){
 $("#btn").bind("click", function(event,a ,b){
   start(event, a, b);
  });
 $("#btn").trigger("click",["5", "6"]); //5,6可以不是字符串类型而为任意类型的数据;(回调函数)
 
});
function start(event, a, b){
 alert(a);
 alert(b);
}
参数传递二:
// 用户点击时,a和b是undefined类型
$(document).ready(function(){
 $("#btn").bind("click",{x:4,y:4}, function(event,a ,b){
   start(event, a, b);
  });
});
function start(event, a, b){
 alert(event.data.x);
 alert(event.data.y);
}

如何使用一的方法(代码触发click事件),加上二的参数传递方式来触发这个事件: 
自己构建Event 对象;
 var e = jQuery.Event("click");
 e.a = 10;
 $("#btn").trigger(e);

注:

在使用bind方法时,其传递的参数必须是已经计算好的,如果是变量,那么它当前拥有的值则作为参数的永久值传递
( Both are  mechanisms for passing information to an event handler, but the extraParameters argument to .trigger() allows

information to be  determined at the time the event is triggered, while the eventData argument to .bind() requires the information

to be already  computed at the time the handler is bound);

根据以上测试结论: 
1、Event.data."xx"-----------永远被绑定事件时的参数所覆盖(严格来说不是覆盖,而是对这个命名空间全部占有,而且是绑定时候就已近确定了data值);
2、使用代码触发Event,则自己定义一个命名空间: e.data2 = {a:56,....,.....,}; 然后再访问就不会造成值覆盖的问题;
3、1和2 的这两种策略又导致了另外一个问题:
在代码中如何才能统一的访问到这个数据,而不至于会导致数据的混乱,只想到一个愚蠢的办法,就是if/else 进行判断,整个流程如下:
注:(
判断一个值是否定义;
if(typeof obj == "undefined") 
if(obj === undefined) 

$(document).ready(function(){
 $("#btn").bind("click",{a:4,b:4}, function(event){
   start(event);
  });
 $("#hp").bind("click", help);
 });
function start(event){
 var a, b;
 if(event.data2 === undefined){
   a = event.data.a;
   b = event.data.b;
 }else{
   a = event.data2.a;
   b = event.data2.b; 
 }
 alert(a);
 alert(b);
}

function help(){
 var e = jQuery.Event("click");
 e.data2 = {
  a:5,
  b:5
  };
 $("#btn").trigger(e);
}

jQuery 中的事件参数传递机制相关推荐

  1. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  2. java中jquery怎么学,浅谈jQuery中的事件--Java学习网

    核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...

  3. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  4. JQuery中的事件和选择器

    学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...

  5. jquery中的事件和动画

    目录 一.jquery中的事件 1.加载DOM 2.事件绑定 3.合成事件 4.事件冒泡 5.事件对象的属性 6.移除事件 二.jquery中的动画 1.隐藏和显示 2.滑动效果 3.淡入淡出效果 三 ...

  6. vue学习:事件传递(冒泡和捕获),事件委托,jquery中的事件委托,$event 获取元素,vue事件修饰符

    事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...

  7. 浏览器中的事件循环机制

    浏览器中的事件循环机制 网上一搜事件循环, 很多文章标题的前面会加上 JavaScript, 但是我觉得事件循环机制跟 JavaScript 没什么关系, JavaScript 只是一门解释型语言, ...

  8. JQuery中的事件委托

    JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...

  9. 四、jQuery 中的事件和动画(嘎嘎详细)

    文章目录 前言 一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...

最新文章

  1. 【CV实践】图像检索从入门到进阶
  2. 调试linux内核前的多虚拟机网络配置(图文教程)
  3. python人工智能方向面试准备_高薪直通车丨人工智能+Python面试经验分享(西安**思数据)...
  4. 安装pyecharts
  5. 简单的群体测试方案C++代码(Group testing against Covid-19)
  6. 11月12号 用户登录输入密码错误达到指定次数后,锁定账户 004
  7. GCC帧指针的开启与关闭以及反汇编测试
  8. 蓝牙 sig base uuid_西圣XISEM真无线蓝牙耳机ASN体验:轻盈舒适,声音悦耳_
  9. Google Chrome 将禁止“退格键”作为后退按钮使用
  10. python 时间格式按年月分组_python – 按时间间隔对消息进行分组
  11. 网页视频无法快进播放时(刷网课)
  12. SD敢达服务器源码,SD敢达全机体代码.doc
  13. Android流行框架大全
  14. 你不可不知的《哈利波特》秘密(二)
  15. 关于硕士毕业论文的思路整理
  16. springboot好博客记录
  17. 中国移动互联网测试开发大会(简称MTSC大会)
  18. 基于JAVA和Oracle数据库实现的项目信息管理系统
  19. Google play中“此应用与您设备不兼容”的问题
  20. 小程序生成二维码 发布版本无法显示 测试和体验版正常

热门文章

  1. Android开发(1):随机绘制彩色实心圆
  2. 如何安装最新的 XFCE 桌面?
  3. 从源码角度看Spark on yarn client cluster模式的本质区别
  4. Http API笔记
  5. OC 方法,继承,特殊方法
  6. Sinclair 的ZX Spectrum 年逾三十
  7. javabean 学习笔记
  8. linux access
  9. Linux模拟超级终端minicom(二)
  10. Linq杂谈之 — Linq导入Excel