mootools_MooTools ElementSpy简介

mootools

One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would be nothing without events. And think of DOM elements without events...terrible! Not knowing when someone clicked, hovered, etc. would completely defeat the purpose of JavaScript!

我喜欢的MooTools之一是易于在类中实现事件。 只需将事件添加到您的Implements数组中，您就可以在任意位置触发事件-这些事件非常有用。 没有事件， ScrollSpy和许多其他流行的MooTools插件将一无所获。 想到没有事件的DOM元素……太可怕了！ 不知道何时有人单击，悬停等会完全破坏JavaScript的目的！

I wanted to take basic element events further. Sure I know when the value of an input changes (via onChange), but what about when another attribute changes? Or a style change? Or the change in a storage value? ElementSpy allows you to assign periodical checks on element attributes or other aspects of elements.

我想进一步介绍基本元素事件。 我当然知道输入值何时更改(通过onChange)，但是另一个属性何时更改又如何呢？ 还是样式改变？ 还是存储值的变化？ ElementSpy允许您对元素属性或元素的其他方面进行定期检查。

View Demo 观看演示

MooTools Javscript (The MooTools Javscript)

var ElementSpy = new Class({
	Implements: [Options,Events],
	options: {
		interval: 100
	},
	initialize: function(element,attribute,options) {
		this.setOptions(options);
		this.element = document.id(element);
		this.val = this.getter(attribute);
		this.interval;
		this.worker = function() {
			var value = this.getter(attribute);
			this.fireEvent('check',[this.val,value]);
			if(value != this.val) {
				this.fireEvent('change',[this.val,value]); //old,new
				this.val = value;
			}
			else {
				this.fireEvent('stagnate',[value]); //current
			}
		}.bind(this);
	},
	start: function() {
		this.interval = this.worker.periodical(this.options.interval);
		this.fireEvent('start');
		return this;
	},
	stop: function() {
		$clear(this.interval);
		this.fireEvent('stop');
		return this;
	},
	getter: function(attribute) {
		return $type(attribute) == 'function' ? (attribute.bind(this.element))() : this.element.get(attribute);
	}
});

The following are arguments, options, and events for ElementSpy:

以下是ElementSpy的参数，选项和事件：

争论 (Arguments)

• element: The element to spy on.

  element ：要监视的元素。

• attribute: The attribute to spy on *or* a function that returns a value.

  attribute ：监视*或*返回值的函数的属性。

• options: The class options.

  options ：类选项。

选件 (Options)

• interval: (defaults to 100) The frequency in milliseconds that the element should be checked.

  interval ：( 默认为100)应检查元素的频率(以毫秒为单位) 。

大事记 (Events)

• change: Fired when the value has changed.

  change ：值更改时触发。

• check: Fired every time the element is checked.

  check ：每次检查元素时触发。

• start: Fired when an element starts being spied on.

  start ：开始监视某个元素时触发。

• stop: Fired when you stop spying on an element

  stop ：停止监视某个元素时触发

MooTools ElementSpy的用法 (The MooTools ElementSpy Usage)

var element = document.id('my-image');
/* simple: just watch an attribute */
var spy = new ElementSpy(element,'src', { 
	duration: 200,
	onChange: function(old,nu) { //alert when the image's SRC has changed!
		alert('Image SRC changed from ' + old + ' to ' + nu);
	}
});
//start spying on the image SRC!
spy.start();

This first usage is about as basic as it gets -- listening for an image SRC change.

第一次使用几乎是最基本的-监听图像SRC更改。

/* difficult: watch a style */
var element2 = document.id('button2');
var spy2 = new ElementSpy(element2,function() {
	return this.getStyle('cursor');
}, { 
	duration: 200,
	onChange: function(old,nu) {
		alert('Change!  Value changed from [' + old + '] to ' + nu + ']');
	},
	onCheck: function(old,nu) {
		console.log('Check:  Value changed from [' + old + '] to ' + nu + ']');
	}
});
spy2.start();
element2.addEvent('click',function() {
	this.setStyle('cursor','pointer');
	(function() { spy2.stop(); }).delay(2000);
});

This second, more advanced solution listens for a change in CSS cursor and allows me to fire events accordingly.

第二个更高级的解决方案侦听CSS光标的更改，并允许我相应地触发事件。

View Demo 观看演示

Please keep in mind that this class can be harsh on the browser if overused so please use with care! I'd also like to hear your thoughts on the class. Like it? Dislike? Have improvement ideas? Let me know!

请记住，如果过度使用该类，在浏览器上可能会很苛刻，因此请小心使用！ 我也想听听你对这堂课的想法。 喜欢它？ 不喜欢？ 有改进的想法吗？ 让我知道！

翻译自: https://davidwalsh.name/mootools-elementspy

mootools