YUI EventTarget例子

最新推荐文章于 2025-08-08 17:07:36 发布

原创最新推荐文章于 2025-08-08 17:07:36 发布 · 806 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #yui

本文深入探讨了事件发布者和订阅者之间的交互过程，包括如何利用EventTarget类的addTarget方法实现事件冒泡，以及如何通过subscribe方法订阅事件。同时，文章详细解释了preventDefault和stopPropagation方法的作用，以及emitFacade属性的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

YUI().use('event-custom', function(Y) {

			function BubbleTarget() {
				Y.log("BubbleTarget init");
			}

			function Publisher(bubbleTo) {
				Y.log("Publisher init");

				this.init(bubbleTo);
			}

			Publisher.prototype = {
				init: function(bubbleTo) {
					this.addTarget(bubbleTo);

					this.publish("TestEvent", {
						emitFacade: true,
						defaultFn: function() {
							Y.log("defaultFn");
						},
						preventedFn: function() {
							Y.log("preventFn");
						},
						stoppedFn: function() {
							Y.log("stoppedFn");
						}
					});
				}
			};

			Y.augment(Publisher, Y.EventTarget);
			Y.augment(BubbleTarget, Y.EventTarget);

			var bubbleTarget = new BubbleTarget();		//BubbleTarget init 

			bubbleTarget.subscribe("TestEvent", function(e) {
				Y.log("fire in BubbleTarget: " + e.data);
			});

			var publisher = new Publisher(bubbleTarget);       //Publisher init 
			publisher.subscribe("TestEvent", function(e) {
				Y.log("fire in Publisher: " + e.data);
			});
			publisher.fire("TestEvent", {data:"s"});
			/**
			  * fire in Publisher: s  
			  * fire in BubbleTarget: s
			  * defaultFn
			  */
			Y.log("-----------------------");	

			publisher.unsubscribeAll("TestEvent");

			publisher.fire("TestEvent", {data:"s"});
			/**
			  * fire in BubbleTarget: s
			  * defaultFn
			  */
			Y.log("-----------------------");

			publisher.subscribe("TestEvent", function(e) {
				Y.log("fire in Publisher: " + e.data);
				e.stopPropagation();
			});
			publisher.fire("TestEvent", {data:"s"});
			/**
			  * fire in Publisher: s  
			  * stoppedFn 
			  * defaultFn
			  */
			Y.log("-----------------------");

			publisher.unsubscribeAll("TestEvent");
			publisher.subscribe("TestEvent", function(e) {
				Y.log("fire in Publisher: " + e.data);
				e.preventDefault();
			});
			publisher.fire("TestEvent", {data:"s"});
			/**
			  * fire in Publisher: s  
			  * fire in BubbleTarget: s
			  * preventFn 
			  */
		});

其中在Publisher中通过addTarget的方法，将BubbleTarget加入到了冒泡的链里面

该方法由EventTarget提供，用来为该实例注册新的冒泡对象

如果要使用preventDefault或者stoppropagation的方法，则需要publish()，否则，该方法可有可无

emitFacede用来包装传入相应事件的方法中event（即参数e），设置为true后，就像一般的event一样，可以调用preventDefault方法，设为false，则只看你传入的参数，不能调用preventDefault等方法

subscribe用来订阅事件，当然也可以用on

当调用e.preventDefault时，就会回调publish方法中的preventedFn方法

调用e.stoppropagation时，就会回调publish方法中的stoppedFn方法