jquery下为Event handler传递动态参数的代码

实例代码


代码如下:

<body>
<div id="demo"></div>
<button id="btn" >trigger it</button>
<script type="text/javascript">
(function($) {
//demo1
$("#demo").bind("demo-trigger", function(e, args) {
var info = [];
//对应的我们从args参数中获取数据
for(var prop in args) {
info.push(prop + ":" + args[prop]);
}
this.innerHTML = info.join(';');
});
$('#btn').click(function() {
// 我们把数据作为一个参数和我们关心的事件名一起传入trigger方法
$('#demo').trigger('demo-trigger', {
name:'Andrew',
age: '23',
job: 'FrontEnd Dev'
});
});

/**demo2
$("#demo").bind("demo-trigger", function(e) {
var info = [];
//我们通过传入的e.extra来获取我们传入的数据
for(var prop in e.extra) {
info.push(prop + ":" + e.extra[prop]);
}
//展现出来
this.innerHTML = info.join(';');
});
$('#btn').click(function() {
//这个用法很有意思 我们new一个jQuery Event对象 参数为我们关心的事件名
var event = new jQuery.Event("demo-trigger");
//给这个event附加一个属性 包含我们的数据
event.extra = {
name:'Andrew',
age :'23',
job :'FrontEnd Dev'
};
//最后把event传入trigger方法 ...看上面的$('#demo').....
$('#demo').trigger(event);
});**/
})(jQuery);
</script>
</body>

赞 (0)

相关推荐

  • 利用jQuery的$.event.fix函数统一浏览器event事件处理

    比如得到触发事件的元素引用在IE浏览器下是:event.srcElement,在FF浏览器下则是:event.target,另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX,而IE浏览器下的处理方式又是不一样的,当然还有一些像"阻止事件冒泡"以及"取消浏览器默认行为"等,不同浏览器也有不同的处理方式,如果我们要使JavaScript在不同的浏览器下能正常处理事件代码,就要分别进行判断处理.现在jQuery为我们提供了统一兼容处理函数$.even

  • Jquery替换已存在于element上的event的方法

    看下面code: 复制代码 代码如下: <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>TestPage</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" typ

  • jquery 关于event.target使用的几点说明介绍

    event.target说明:引发事件的DOM元素. this和event.target的区别js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: this和event.target的相同点this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target); 这使我想起了以前写的一个例子: 复制代码 代码如下: //del event 

  • jQuery源码分析之Event事件分析

    对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法.一般lib都会对浏览器的提供的函数做一些扩展,解决兼容性内存泄漏等问题.第三个问题就是如何得到domReady的状态. 6.1 event的包裹 浏览器的事件兼容性是一个令人头疼的问题.IE的event在是在全局的window下, 而mozilla的event是事件源参数传入到回调函数中.还有很多的事件处理方式也一样. Jquery提供了一个 event的包裹,这个相对于其它的lib提供的有点简单,

  • jQuery.event兼容各浏览器的event详细解析

    介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了! jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断. 1.event.type属性该方法作用是可以获取到时间的类型 复制代码 代码如下: $("a").cl

  • jQuery中even选择器的定义和用法

    本文实例讲述了jQuery中even选择器的定义和用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有索引值为偶数的元素,从0开始计数. 语法结构: 复制代码 代码如下: $(":even") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等. 例如: 复制代码 代码如下: $("li:even)").css("color","green") 以上代码是将li元素集合中索引为偶数的li中的字体颜色设置

  • jquery中event对象属性与方法小结

    JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的地方,Jquery对Event做了标准化所以可以放心用. * .target  这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是否是事件源头(compare event.target to this) * .pageX:  鼠标的left属性,相对于

  • Jquery阻止事件冒泡 event.stopPropagation

    描述: 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数. version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了. 这个方法对 trigger() 来自定义的事件同样有效. 注意,这不会阻止同一个元素上的其它事件处理函数的运行. Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部,live事件是

  • jquery利用event.which方法获取键盘输入值的代码

    实例 显示按了哪个键: $("input").keydown(function(event){ $("div").html("Key: " + event.which); }); 亲自试一试 定义和用法 which 属性指示按了哪个键或按钮. 语法 event.which参数 描述 event 必需.规定要检查的事件.这个 event 参数来自事件绑定函数. jQuery丢弃了标准的 button 属性采用 which,这有点让人费解. whic

  • jquery下为Event handler传递动态参数的代码

    实例代码 复制代码 代码如下: <body> <div id="demo"></div> <button id="btn" >trigger it</button> <script type="text/javascript"> (function($) { //demo1 $("#demo").bind("demo-trigger",

  • vue v-on:click传递动态参数的步骤

    最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案, 新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待以后会有更好的方法解决这个事情 需求:根据每列传递的参数,决定弹窗后面是积分够了去直接购买还是不够需要去转换 二.页面代码[无法可传的参数,我把它放进了一个自定义标签date-id] <div class="ticket-main"> <a href="java

  • 详解Spring框架下向异步线程传递HttpServletRequest参数的坑

    在spring的注解 @RequestMapping 之下可以直接获取 HttpServletRequest 来获得诸如request header等重要的请求信息: @Slf4j @RestController @RequestMapping("/test") public class TestController { private static final String HEADER = "app-version"; @RequestMapping(value

  • JQuery下的Live方法和$.browser方法使用代码

    复制代码 代码如下: $(function(){ Ajaxload("?Uid=1<%= Yan.GET_Dict(id, 8, TableName)%>") $("#ThreeM a:first").addClass("addBg"); $(".pageP2 a").live("click",function(){var NewUrl=$(this).attr("href"

  • jQuery支持动态参数将函数绑定到事件上的方法

    本文实例讲述了jQuery支持动态参数将函数绑定到事件上的方法.分享给大家供大家参考.具体分析如下: 下面的js代码提供了两种方法用于绑定函数到事件,其中方法二可以传递动态参数,非常实用 //方法一 $('#foo').click(function(event) { alert('User clicked on "foo."'); }); //方法二, 支持动态传参 $('#foo').bind('click', {test1:"abc", test2:"

  • C/C++ 传递动态内存的深入理解

    当你涉及到C/C++的核心编程的时候,你会无止境地与内存管理打交道.这些往往会使人受尽折磨.所以如果你想深入C/C++编程,你必须静下心来,好好苦一番.现在我们将讨论C/C++里我认为哪一本书都没有完全说清楚,也是涉及概念细节最多,语言中最难的技术之一的动态内存的传递.并且在软件开发中很多专业人员并不能写出相关的合格的代码.[引入] 看下面的例子,这是我们在编写库函数或者项目内的共同函数经常希望的. 复制代码 代码如下: void MyFunc(char *pReturn, size_t siz

  • 浅谈function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下: 1.show(*args) def show(*args): print(args,type(args)) #以元组的形式向列表传递参数 show(11,22,33,44,55,66) 首先我们定义了一个函数,函数show(*args)里面的*args可以接收动态参数,这里我们接收一个元组形式的参数,我们可以向show()里面传递很多参数,函数默认把这些参数作为一个元组进行接收. 2.show(**arg

  • Python带动态参数功能的sqlite工具类

    本文实例讲述了Python带动态参数功能的sqlite工具类.分享给大家供大家参考,具体如下: 最近在弄sqlite和python 在网上参考各教程后,结合以往java jdbc数据库工具类写出以下python连接sqlite的工具类 写得比较繁琐 主要是想保留一种类似java的Object-args动态参数写法 并兼容数组/list方式传递不定个数参数 并且返回值是List形式 dict字典 以便和JSON格式互相转换 在python中有一些区别 经过该工具类封装之后可以有以下用法: db.e

  • SpringMVC 接收前端传递的参数四种方式小结

    目录 SpringMVC 接收前端传递的参数四种方式 @RequestParam 获取注解 @PathVariable获取注解 SpringMVC,可以不设置任何注解即可接收参数 SpringMVC,也可以自动包装成对象 @RequestBody 用来接收数组或者复杂对象 SpringMVC的自动封装(不传参也能进入) SpringMVC接收不到前端传递的参数原因 代码清单 SpringMVC 接收前端传递的参数四种方式 @RequestParam注解 @PathVariable注解 Sprin

  • jQuery防止click双击多次提交及传递动态函数或多参数

    今天是写的是关于JQ的双击事件防止多次提交的问题,并且通过函数可以批量定义,通能性更强了,通过方法动态绑定元素的事件.而且可以动态传递函数名或者多参数等(本实例只传递函数名通过Eval调用). 我们都知道在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcl

随机推荐