MooTools Tip :在创建元素的时候并添加事件

MooTools Tip :在创建元素的时候并添加事件

说到这里小技巧,是为了纠正以前犯下的错误,那就是“我在用MooTools创建完元素以后再添加事件” 。

那就先看一下例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var a = new Element('a',{
	href: 'http://blog.moocss.com',
	rel: 'lightbox',
	text: 'CssrRinbow.cn Blog',
	title: 'CssrRinbow.cn: Best on the Web!',
	'class': 'shoutout',
	styles: {
		color: '#0f0',
		display: 'block'
	}
});
a.inject($('description'));
 
a.addEvents({
	click: function(e) {
		e.stop();
		console.log('Clicked!');
	},
	mouseenter: function(e) {
		e.stop();
		console.log('You are on top of me!');
	}
});

你可能不知道,我们还有更好的写法,那就是“您在创建元素的过程中并把相关事件添加进去”。那就看一下比较好的写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var a = new Element('a',{
	href: 'http://blog.moocss.com',
	rel: 'lightbox',
	text: 'CssrRinbow.cn Blog',
	title: 'CssrRinbow.cn: Best on the Web!',
	'class': 'shoutout',
	styles: {
		color: '#0f0',
		display: 'block'
	},
	events: {
		click: function(e) {
			e.stop();
			console.log('Clicked!');
		},
		mouseenter: function() {
			console.log('You are on top of me!');
		}
	}
});
a.inject($('description'));

MooTools Docs中的例子:http://mootools.net/docs/core/Element/Element#Element:constructor

站点统计