jQuery trigger（）方法：如何在jQuery中创建自定义事件-js教程-PHP中文网

JQuery trigger() Method : How to Create Custom Events in jQuery

jQuery trigger（）方法：如何在jQuery中创建自定义事件

在我上一篇文章中，如何在JavaScript中创建自定义事件，我们讨论了自定义事件的好处和本地的托管对象。回顾一下，我们可以解雇自己的命名活动。每当提交有效的消息时，DemonStation页面提供了一个表格，该表格发出了“ newmessage”事件。任何数量的处理人员都可以订阅此事件以执行自己的操作。我们唯一的问题：目前在Safari或Internet Explorer中不支持Customevent。浏览器兼容性问题有很多方法。一种解决方案是编写您自己的事件封装功能，以实现自定义事件功能。幸运的是，没有必要：在包括jQuery在内的几个JavaScript库中支持自定义活动。 jQuery的.Trigger方法是关键。您可以在任何时候都使用新的类型名称和任意数据触发事件，例如

$.event.trigger({
	type: "newMessage",
	message: "Hello World!",
	time: new Date()
});

登录后复制

管理人员现在可以订阅“新杂志”事件，例如

$(document).on("newMessage", newMessageHandler);

登录后复制

>演示页

此示例演示了jQuery代码：查看jQuery自定义事件演示页面标准事件处理程序在HTML表单上寻找提交。该函数获取当前消息，并假设其有效，则会派遣一个新的“新杂志”事件。

$("#msgbox").on("submit", SendMessage);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}

登录后复制

管理人员现在可以订阅“新杂志”事件。事件仅在有有效的消息时才提出：

// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}

登录后复制

可以从事件对象的消息属性中提取消息本身。

>浏览器兼容性

jQuery 1.x方法在任何浏览器中运行，包括Internet Explorer 6.0及以上。显然，即使代码比本地的Customevents慢（毫无意义）的代码运行（毫无意义）也是一个巨大的好处。但是，请注意，计划于2013年发布的JQuery 2.0将不支持IE6、7和8。 JQuery很受欢迎，但是在包括原型，Mootools和Yui在内的大多数JavaScript库中都支持自定义活动。 >如果您喜欢阅读这篇文章，您会喜欢学习的；从大师那里学习新鲜技能和技术的地方。成员可以立即访问SitePoint的所有电子书和交互式在线课程，例如JQuery：Nevice to Ninja：New Kicks and Tricks。 >对本文的评论已关闭。有关于jQuery的问题吗？为什么不在我们的论坛上询问？ 经常询问有关jQuery自定义事件的问题（常见问题解答） >什么是jQuery自定义事件，为什么它们很重要？

jQuery自定义事件是用户定义的事件，除了JQuery提供的标准事件外，开发人员还可以创建和管理自己的事件。它们很重要，因为它们提供了一种封装行为的方法，该行为可以在应用程序的不同部分重复使用。这可以通过减少重复和促进关注点的分离来导致更清洁，更可维护的代码。

>如何在jQuery中创建自定义事件？您可以使用.trigger（）方法触发自定义事件。这是一个简单的示例：

$（document）.trigger（'mycustomevent'）;
$（document）.trigger（'mycustomevent'，{key：'value'}）;
在此示例中，对象{key：'value'} is传递给事件处理程序。

如何处理jQuery中的自定义事件？

您可以使用.on（）使用.on（）来处理jQuery中的自定义事件方法。这是一个示例：

$（document）.on（'mycustomevent'，function（event，data）{
console.log（data.key）; //'value'value'
}） ;在此示例中，在此示例中，提供给.on（）方法的功能是事件处理程序。

>我可以阻止自定义事件传播是的，您可以通过在事件对象上调用.stoppropagation（）方法来阻止自定义事件在jQuery中传播。这是一个示例：

$（document）.on（'mycustomevent'，function（event）{

event.stoppropagation（）;
}）;

，stoppropagation（）方法可防止事件冒泡。是的，您可以通过在事件对象上调用.preventDefault（）方法来防止jQuery中自定义事件的默认操作。这是一个示例：

$（document）.on（'mycustomevent'，function（event）{

event.preventdefault（）;

}），destrest -deffault（）方法可防止与事件关联的默认操作。

我只能在jquery中触发一次自定义事件？
>是的，您可以使用.One（）方法而不是.on（）方法在jQuery中仅触发一次自定义事件。这是一个示例：

$（document）.One（'mycustomevent'，function（）{console.log（'this只能记录一次。'）;
}）;

我可以删除自定义事件在jQuery中使用的处理程序？这是一个示例：