1.22 JQuery5:绑定自定义事件

栏目: jQuery · 发布时间: 7年前

内容简介:jQuery的事件自定义事件还是通过on绑定的,然后再通过trigger来触发这个事件在jQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn按钮的click事件。也可以直接用简化写法click(),来达到同样的效果(对已存在的系统事件调用):

JQuery 自定义事件

jQuery的事件自定义事件还是通过on绑定的,然后再通过trigger来触发这个事件

1. 绑定事件

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});

2. 执行事件

//触发hello事件
element.trigger("hello");

trigger的几种常见用法

1.常用模拟

在jQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn按钮的click事件。

$("#btn").trigger("click");

也可以直接用简化写法click(),来达到同样的效果(对已存在的系统事件调用):

$("#btn").click();

2.触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。

例如为元素绑定一个“myClick”的事件,jQuery代码如下:

$("#btn").bind("myClick", function () {
    $("#test").append("<p>我的自定义事件。</p>");
});

想要触发这个事件,可以使用下面的代码来实现:

3.传递数据

trigger(tpye[,datea])方法有两个参数,第一个参数是要触发的事件类型,第二个单数是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

下面的是一个传递数据的例子:

$("#btn").bind("myClick", function (event, message1, message2) { //获取数据
    $("#test").append("p" + message1 + message2 + "</p>");
});
$("#btn").trigger("myClick",["我的自定义","事件"]); //传递两个数据
$(“#btn”).trigger(“myClick”,["我的自定义","事件"]); //传递两个数据

4.执行默认操作

triger()方法触发事件后,会执行浏览器默认操作。例如:

$("input").trigger("focus");

以上代码不仅会触发为input元素绑定的focus事件,也会使input元素本身得到焦点(浏览器默认操作)。

如果只想触发绑定的focus事件,而不想执行浏览器默认操作,可以使用jQuery中另一个类似的方法-triggerHandler()方法。(没有试验过,知道有这么一回事)

$("input").triggerHandler("focus");

该方法会触发input元素上绑定的特定事件,同时取消浏览器对此事件的默认操作,即文本框指触发绑定的focus事件,不会得到焦点。

1.22 JQuery5:绑定自定义事件


以上所述就是小编给大家介绍的《1.22 JQuery5:绑定自定义事件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Machine Learning

Machine Learning

Kevin Murphy / The MIT Press / 2012-9-18 / USD 90.00

Today's Web-enabled deluge of electronic data calls for automated methods of data analysis. Machine learning provides these, developing methods that can automatically detect patterns in data and then ......一起来看看 《Machine Learning》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具