JavaChen on JavaJavaScript http://www.javachen.com Just some sharing about Java open source and life Mon, 06 Feb 2012 12:16:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 js在线压缩 http://www.javachen.com/2010/06/javascript-min-tools/ http://www.javachen.com/2010/06/javascript-min-tools/#comments Fri, 25 Jun 2010 13:36:34 +0000 JavaChen http://www.javachen.com/?p=1745 您可能也喜欢：
Firebug中的console
Unobtrusive Javascript
JavaScript中isNaN函数
javascript 弹出子窗口
JavaScript验证Email 无觅 ]]> 最近在看到[关注Java]给我的留言后,决定接受他的建议,对本站的js和css进行压缩.在此,对他的热情,表示由衷的感谢!在使用网上的在线压缩工具后,发现本站在ff浏览器下FireBug会提示js错误,很是郁闷.仔细研究之后发现,网上大多数的js压缩工具在压缩JavaScript代码后会省去部分语句后面的分号,导致浏览器不能正常解析JavaScript代码.
看下面截图,截图截自http://js.clicki.cc/.

观看什么压缩前的JavaScript代码,每个JavaScript语句后面都有个分号表示当前语句已经结束.

点击净化(压缩代码)按钮后,代码压缩如下:

var getPositionLite=function(el){var x=0,y=0;while(el){x+=el.offsetLeft||0;y+=el.offsetTop||0;el=el.offsetParent}return{x:x,y:y}};var history={‘v1.0′:['2009-08-07','代码美化功能上线'],’v1.1′:['2009-08-08','代码净化、压缩功能上线'],’v1.2′:['2009-08-09','代码解压功能上线'],’v1.21′:['2009-08-10','修正代码多次压缩后不能解压的bug'],’v1.22′:['2009-08-10','修正可能误解压的bug']};

按我的理解JavaScript代码在被压缩之后,应该可以用某些ide工具将其格式化成正常的代码,比如使用myeclipse工具.遗憾的是,在myeclipse工具中,按ctrl和shift和F按键后,代码不会格式化而且还会提示代码有错误!问题何在?

干脆还是用在线工具将代码美化一下,看看是啥样子.

从截图中看出,经过美化后的JavaScript代码有几行代码没有了分号,显然是被压缩工具给过滤掉了.而且被美化后的代码风格有点像json的风格.

在网上找了多个网站,经过测试后发现该网站的在线压缩工具能够达到我的预期期望与要求:http://zhongguoren.cn/jsmin/,你可以浏览本站的链接观看效果:[js在线压缩演示]

为什么该网站的压缩工具可以实现我想要的结果呢?看了看其中的源码,发现其中的JavaScript代码处理的很简单.代码如下:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

String.prototype.has = function(c) {
	return this.indexOf(c) > -1;
};
function jsmin(comment, input, level) {
	if (input === undefined) {
		input = comment;
		comment = '';
		level = 2;
	} else if (level === undefined || level < 1 || level > 3) {
		level = 2;
	}
	if (comment.length > 0) {
		comment += '\n';
	}
	var a = '', b = '', EOF = -1,
           LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
           DIGITS = '0123456789', ALNUM = LETTERS
			+ DIGITS + '_$\\', theLookahead = EOF;
	function isAlphanum(c) {
		return c != EOF && (ALNUM.has(c) || c.charCodeAt(0) > 126);
	}
	function get() {
		var c = theLookahead;
		if (get.i == get.l) {
			return EOF;
		}
		theLookahead = EOF;
		if (c == EOF) {
			c = input.charAt(get.i);
			++get.i;
		}
		if (c >= ' ' || c == '\n') {
			return c;
		}
		if (c == '\r') {
			return '\n';
		}
		return ' ';
	}
	get.i = 0;
	get.l = input.length;
	function peek() {
		theLookahead = get();
		return theLookahead;
	}
	function next() {
		var c = get();
		if (c == '/') {
			switch (peek()) {
			case '/':
				for (;;) {
					c = get();
					if (c <= '\n') {
						return c;
					}
				}
				break;
			case '*':
				get();
				for (;;) {
					switch (get()) {
					case '*':
						if (peek() == '/') {
							get();
							return ' ';
						}
						break;
					case EOF:
						throw 'Error: Unterminated comment.';
					}
				}
				break;
			default:
				return c;
			}
		}
		return c;
	}
	function action(d) {
		var r = [];
		if (d == 1) {
			r.push(a);
		}
		if (d < 3) {
			a = b;
			if (a == '\'' || a == '"') {
				for (;;) {
					r.push(a);
					a = get();
					if (a == b) {
						break;
					}
					if (a <= '\n') {
				            throw 'Error: unterminated string literal: ' + a;
					}
					if (a == '\\') {
						r.push(a);
						a = get();
					}
				}
			}
		}
		b = next();
		if (b == '/' && '(,=:[!&|'.has(a)) {
			r.push(a);
			r.push(b);
			for (;;) {
				a = get();
				if (a == '/') {
					break;
				} else if (a == '\\') {
					r.push(a);
					a = get();
				} else if (a <= '\n') {
					throw 'Error: unterminated Regular Expression literal';
				}
				r.push(a);
			}
			b = next();
		}
		return r.join('');
	}
	function m() {
		var r = [];
		a = '\n';
		r.push(action(3));
		while (a != EOF) {
			switch (a) {
			case ' ':
				if (isAlphanum(b)) {
					r.push(action(1));
				} else {
					r.push(action(2));
				}
				break;
			case '\n':
				switch (b) {
				case '{':
				case '[':
				case '(':
				case '+':
				case '-':
					r.push(action(1));
					break;
				case ' ':
					r.push(action(3));
					break;
				default:
					if (isAlphanum(b)) {
						r.push(action(1));
					} else {
						if (level == 1 && b != '\n') {
							r.push(action(1));
						} else {
							r.push(action(2));
						}
					}
				}
				break;
			default:
				switch (b) {
				case ' ':
					if (isAlphanum(a)) {
						r.push(action(1));
						break;
					}
					r.push(action(3));
					break;
				case '\n':
					if (level == 1 && a != '\n') {
						r.push(action(1));
					} else {
						switch (a) {
						case '}':
						case ']':
						case ')':
						case '+':
						case '-':
						case '"':
						case '\'':
							if (level == 3) {
								r.push(action(3));
							} else {
								r.push(action(1));
							}
							break;
						default:
							if (isAlphanum(a)) {
								r.push(action(1));
							} else {
								r.push(action(3));
							}
						}
					}
					break;
				default:
					r.push(action(1));
					break;
				}
			}
		}
		return r.join('');
	}
	jsmin.oldSize = input.length;
	ret = m(input);
	jsmin.newSize = ret.length;
	return comment + ret;
}

上面代码的原理很简单,就是将要压缩的JavaScript代码中的空格换行制表符等空白空间给去掉,从而减少JavaScript代码的大小.
刚好最近在看json.jar源码,发现其中有个java类的代码与上面的方法在处理方式上有基本相同.

?View Code JAVA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

public char nextClean() throws JSONException {
		for (;;) {
			char c = next();
			if (c == '/') {
				switch (next()) {
				case '/':
					do {
						c = next();
					} while (c != '\n' && c != '\r' && c != 0);
					break;
				case '*':
					for (;;) {
						c = next();
						if (c == 0) {
							throw syntaxError("Unclosed comment");
						}
						if (c == '*') {
							if (next() == '/') {
								break;
							}
							back();
						}
					}
					break;
				default:
					back();
					return '/';
				}
			} else if (c == '#') {
				do {
					c = next();
				} while (c != '\n' && c != '\r' && c != 0);
			} else if (c == 0 || c > ' ') {
				return c;
			}
		}
	}
       public String nextString(char quote) throws JSONException {
		char c;
		StringBuffer sb = new StringBuffer();
		for (;;) {
			c = next();
			switch (c) {
			case 0:
			case '\n':
			case '\r':
				throw syntaxError("Unterminated string");
			case '\\':
				c = next();
				switch (c) {
				case 'b':
					sb.append('\b');
					break;
				case 't':
					sb.append('\t');
					break;
				case 'n':
					sb.append('\n');
					break;
				case 'f':
					sb.append('\f');
					break;
				case 'r':
					sb.append('\r');
					break;
				case 'u':
					sb.append((char) Integer.parseInt(next(4), 16));
					break;
				case 'x':
					sb.append((char) Integer.parseInt(next(2), 16));
					break;
				default:
					sb.append(c);
				}
				break;
			default:
				if (c == quote) {
					return sb.toString();
				}
				sb.append(c);
			}
		}
	}
您可能也喜欢：

Firebug中的console
Unobtrusive Javascript
JavaScript中isNaN函数
javascript 弹出子窗口
JavaScript验证Email
无觅
By the time your rss reader get this post here is 1 comments ,Welcome you come to leave your opinion !]]> http://www.javachen.com/2010/06/javascript-min-tools/feed/ 1 重回五道口 http://www.javachen.com/2010/04/back-to-wudaokou/ http://www.javachen.com/2010/04/back-to-wudaokou/#comments Sat, 24 Apr 2010 16:23:13 +0000 JavaChen http://www.javachen.com/?p=1377 您可能也喜欢：
Unobtrusive Javascript
JavaScript验证Email
javascript 弹出子窗口
JavaScript屏蔽鼠标右键
JavaScript 中的 call与apply 无觅 ]]> 历时半年又重新回到了五道口，回到了在北京的起点，想起了当时在五道口地下室生活的艰辛岁月，想起了当时来北京的风尘仆仆和壮志满愁。忆往昔，往事 不堪回首。

辞职，休息一周，上班四天，又离职，休息一周，今天又开始了上班。

想想这一连串的过程，满是心酸与无奈。在 BJSASC呆了半年，好不容易等到工资发了，医疗保险卡发了，随即也开始递交了迟到四个月的辞职书。只是算计好了结果，却没有算计好过程。4月1日，提 出辞职（不是在愚人节开玩笑，只是想借此讽刺一下）。满以为工资会按照合同4.5发下来、离职手续会在半个月后办完（其实，我更期望在四月底办完），可 是，公司办理离职手续的效率实在是比入职手续快多了，还没有到四天就让我离职了，而最后一个月的工资却要等到4.15发下来。入职半年，折腾人的事够多 了，没有想到在离职时候还不忘折腾最后一把。人都离职了，却还拖欠了一个月的工资，囧！每想及此，总感觉自己有点像代码民工！唉，可怜的人！

投 了一个星期的简历，准确来说是投了2个晚上的简历，等了五天的时间，接到了三个公司的笔试通知。第一个公司，很好的一个公司，很适合我的一个公司，只可惜 当时java的基本知识都忘记了，再加上临场笔试时候有些题目说好了是多选题我篇没有多选（自己跟自己过意不去。。。），直接导致笔试成绩没有及格。第二 个公司，笔试的时候，在答题纸上满满写了2页纸的答案，恨不得把自己所有知道的都写上去。等了一个星期，没有接到面试通知，或许打电话我了让我直接挂了。 想了想没有接到电话的愿意，难道是这些题目答的都不太准确，还是答的够详细让笔试官怀疑我事先把答案背好了？搞不清楚原因，至少从笔试当中又学到了不少应 该注意的知识点。第三个公司，一个小公司，之所以说小是这个公司还没有成立。笔试完后直接面试，面试官提出一个入职要求：先试用2周，看这2周表现决定是 否录入，如果不合格2周工作没有工资，合格了工资照发不误。那面试官笑的够灿烂的问我说能不能接受这无理的要求，明明都说了是无理的要求还问我能不能接 受，我晕！我附和的假笑，当然可以接受！（其实，还有后面一句没有说：其实是骗你的！）。

在接下来的星期一，收到了一个面试通知，时间定在 下午5点后，要求我带上一切证件和证书。没听说过邀请应聘者下班时间去面试的！说是面试，一般公司都会先笔试后面试，这公司没有笔试直接面试，还要我带上 学历证书，事先就想好了要录用我吗？简单的面试后，问我薪资要求，在他的不断提示我不要写虚高的数字后，我写下了试用3000（我的最低期望值）。在他的 狂砍之后，试用期被减到了2800，转正3200，转正三个月后看能力涨工资，在六个月后又看能力涨工资。。。。除了其他的，这点我倒是蛮喜欢，按能力给 予薪酬！在他们办公室看了看就六七张桌子，公司总共就8个人，完全是一个小公司！小公司也有小公司的好处，能够学到很多东西，自我提高的空间很大，当然压 力也越大。在经历了半个月的国企大公司的工作之后，我就想去小公司工作看看，看看小公司运行、管理、发展情况，我想体验小公司创业初期的艰辛与困难。这个 公司做的项目涉及很多通信方面的知识，涉及java底层的技术，在加上他们的项目会朝嵌入式的方向发展，所以我决定在这个工作干下去，按照面试我的经理说 的，和他一起在精神上合作，和他一起经历公司的创业初期和发展阶段。还记得面试的时候，面试经理就让我好好的做决定，不要一时冲动，要想好了在告诉结果。 在回家的公交上，我好好的想了想，权衡利弊，决定在这个公司经历艰辛、接受挑战、学习新的知识、创造自我价值！在这个公司我很有诚意的干了四天，虽然办公 的环境有点差（办公椅过矮，每天坐着背疼），虽然被要求做我不是蛮喜欢做的前台js的工作。可是，在这里经历非常人性化的管理、非常和谐的内部团队氛围之 后，我慢慢的感觉经理好像是在花一周的时间考查我（也许没有，是我想多了），慢慢的对他们现在的项目失去了兴趣（前台全部是用js操作dom画出来 的。。。）。在我四次要求看他们的一个很小的查询框架而被拒绝之后，我更加失去工作的激情。不熟悉他们的项目业务，而让我用jquery的技术重新实现一 遍，虽然我能够做出来，但随着兴趣和激情的消失，我对这个工作也失去了兴趣。

在离开第一个公司之后，考虑了很多问题：唐家岭要拆了，是不是 该搬家了？如果五一前没有找到工作，是不是可以回武汉去工作？。。。。。。在这个时候，告诉家人我想回武汉的时候，家人都不赞成说武汉工作难找，让我继续 在北京工作。我只告诉了我想回武汉，虽然这个决定只是一时的想法，还没有下好最后的决心，而没有告诉他们这个时候我已经辞职了,因为我不想让他们担心。为 什么回武汉？要问我原因，我也说不出个多少很大的原因来（至少有几个小原因），只是回武汉工资太低，项目太少。。。。。。

话说在上面最后提 到的一个小公司里工作的时候，我其实还是有离开北京的想法，再加上上面的一些原因，使我坚定了离开的决心，虽然当时来这个公司的时候，抱着很大的决心与期 望！虽然离开了，但是我觉得在这个公司的四天时间里还是学到了不少东西（这是后话），还是感谢这个公司感谢孙经理感谢同事（没必要先感谢国家吧？）。

简 单来说，我在第一个公司工作了半年，在第二个公司工作了四天还没有签合同我就离开了。第一个公司为北京神舟航天软件技术有限公司，很好的一个公司，很有前 途的一个公司，只是对这个公司的领导缺乏了解，但总体来说虽然存在不少问题，但貌似应该实现其2012年上市的目标（此公司在追求利益的过程中，视乎淡化 了公司文化价值和公司的管理制度）。第二个公司的经理在航天集团干过十年，现在还想回去继续工作，我一直在想这个经理为什么会直接给我机会选择是否去他们 公司上班，难道是因为“航天”的缘故，貌似不是！那是为什么？我也不知道。

在又经历一个星期的时间后，又找到了一家小公司，也就是现在的公 司，老板是北航博士（又跟“航天”挂钩了，我晕），会几种开发语言，很NB。今天面试完之后上了一天班，一个星期之后在跟我签合同。又是如此迅速的让我上 岗了，我担心我会不会又如此迅速的离职，这很难说，让我们拭目以待！

您可能也喜欢：

Unobtrusive Javascript
JavaScript验证Email
javascript 弹出子窗口
JavaScript屏蔽鼠标右键
JavaScript 中的 call与apply
无觅
By the time your rss reader get this post here is 3 comments ,Welcome you come to leave your opinion !]]> http://www.javachen.com/2010/04/back-to-wudaokou/feed/ 3 Handling Keyboard Shortcuts in JavaScript http://www.javachen.com/2010/03/handling-keyboard-shortcuts-in-javascript/ http://www.javachen.com/2010/03/handling-keyboard-shortcuts-in-javascript/#comments Thu, 11 Mar 2010 08:58:31 +0000 JavaChen http://www.javachen.com/?p=1121 您可能也喜欢：
DOM 事件模型
javascript的DOM函数方法
Unobtrusive Javascript
javascript 弹出子窗口
JavaScript中isNaN函数 无觅 ]]> 在web开发中，对页面的进行全局或部分页面进行键盘快捷键事件注册，能够有效的提高页面的用户体验。在ExtJs中的表格Form中就有回车提交的事件，实现方法可以参照我的另一篇文章：Ext监控回车按键。
在网络上看到了一篇处理JavaScript键盘快捷键事件的文章：Handling Keyboard Shortcuts in JavaScript ，其实现方法很简单，只是封装了一个shortcut的类，提供了注册快捷键的方法和删除快捷键事件的方法。
其源代码如下，其中代码逻辑很容易看懂而且其中考虑了各种浏览器的兼容问题（可以参照我的上一篇文章：DOM 事件模型）。通过以下代码，可以熟悉如何处理各种浏览器事件处理的兼容性问题。

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279

/**
 * http://www.openjs.com/scripts/events/keyboard_shortcuts/ Version : 2.01.B By
 * Binny V A License : BSD
 * Modified by www.javachen.com  javachen
 */
shortcut = {
	'all_shortcuts' : {},// All the shortcuts are stored in this array
	'add' : function(shortcut_combination, callback, opt) {
		// Provide a set of default options
		var default_options = {
			'type' : 'keydown',//按键事件类型,IE中keypress不支持功能按键，所以应该用keydown/keyup事件来进行补充。
			'propagate' : false,
			'disable_in_input' : false,//是否在input,Textarea内有效
			'target' : document,//事件作用对象,相当于事件的相应范围scope,该值可以为节点的ID
			'keycode' : false
		}
		//处理配置项,如果为空就使用默认的
		if (!opt)
			opt = default_options;
		else {
			for (var dfo in default_options) {
				if (typeof opt[dfo] == 'undefined')
					opt[dfo] = default_options[dfo];
			}
		}
 
		//如果target为字符串,则通过该字符串取得该DOM对象
		var ele = opt.target;
		if (typeof opt.target == 'string')
			ele = document.getElementById(opt.target);
 
		var ths = this;//保存当前的this引用
		//联合快捷键
		shortcut_combination = shortcut_combination.toLowerCase();
 
		// The function to be called at keypress
		var func = function(e) {
			e = e || window.event;//处理浏览器对event的兼容性,只有IE浏览器的event=window.event
 
			if (opt['disable_in_input']) { // Don't enable shortcut keys in
				// Input, Textarea fields
				var element;
				if (e.target)
					//针对IE浏览器
					element = e.target;
				else if (e.srcElement)
					//针对DOM标准浏览器
					element = e.srcElement;
				//如果当前节点为文本节点,则取其父节点
				if (element.nodeType == 3)
					element = element.parentNode;
				//如果当前节点标签名为INPUT或TEXTAREA,则当前函数不做处理
				if (element.tagName == 'INPUT' || element.tagName == 'TEXTAREA')
					return;
			}
 
			// Find Which key is pressed
			if (e.keyCode)
			    //针对IE浏览器,e.keyCode返回按键对应的数值
				code = e.keyCode;
			else if (e.which)
			    //针对DOM标准浏览器,如Firefox,e.keyCode返回按键对应的数值
				code = e.which;
			//e.which将给出该键的索引值，把索引值转化成该键的字母或数字值的方法需要用到静态函数String.fromCharCode()
			var character = String.fromCharCode(code).toLowerCase();
 
			if (code == 188)
				character = ",";
			if (code == 190)
				character = "."; 
 
			var keys = shortcut_combination.split("+");
			// Key Pressed - counts the number of valid keypresses - if it is
			// same as the number of keys, the shortcut function is invoked
			var kp = 0;
 
			// Work around for stupid Shift key bug created by using lowercase -
			// as a result the shift+num combination was broken
			var shift_nums = {
				"`" : "~",
				"1" : "!",
				"2" : "@",
				"3" : "#",
				"4" : "$",
				"5" : "%",
				"6" : "^",
				"7" : "&",
				"8" : "*",
				"9" : "(",
				"0" : ")",
				"-" : "_",
				"=" : "+",
				";" : ":",
				"'" : "\"",
				"," : "<", 				
                                "." : ">",
				"/" : "?",
				"\\" : "|"
			}
			// Special Keys - and their codes
			var special_keys = {
				'esc' : 27,
				'escape' : 27,
				'tab' : 9,
				'space' : 32,
				'return' : 13,
				'enter' : 13,
				'backspace' : 8,
 
				'scrolllock' : 145,
				'scroll_lock' : 145,
				'scroll' : 145,
				'capslock' : 20,
				'caps_lock' : 20,
				'caps' : 20,
				'numlock' : 144,
				'num_lock' : 144,
				'num' : 144,
 
				'pause' : 19,
				'break' : 19,
 
				'insert' : 45,
				'home' : 36,
				'delete' : 46,
				'end' : 35,
 
				'pageup' : 33,
				'page_up' : 33,
				'pu' : 33,
 
				'pagedown' : 34,
				'page_down' : 34,
				'pd' : 34,
 
				'left' : 37,
				'up' : 38,
				'right' : 39,
				'down' : 40,
 
				'f1' : 112,
				'f2' : 113,
				'f3' : 114,
				'f4' : 115,
				'f5' : 116,
				'f6' : 117,
				'f7' : 118,
				'f8' : 119,
				'f9' : 120,
				'f10' : 121,
				'f11' : 122,
				'f12' : 123
			}
 
			var modifiers = {
				shift : {
					wanted : false,
					pressed : false//是否被按
				},
				ctrl : {
					wanted : false,
					pressed : false
				},
				alt : {
					wanted : false,
					pressed : false
				},
				meta : {
					wanted : false,
					pressed : false
				} // Meta is Mac specific
			};
 
			if (e.ctrlKey)
				modifiers.ctrl.pressed = true;
			if (e.shiftKey)
				modifiers.shift.pressed = true;
			if (e.altKey)
				modifiers.alt.pressed = true;
			if (e.metaKey)
				modifiers.meta.pressed = true;
 
			for (var i = 0; k = keys[i], i < keys.length; i++) {
				// Modifiers
				if (k == 'ctrl' || k == 'control') {
					kp++;
					modifiers.ctrl.wanted = true;
 
				} else if (k == 'shift') {
					kp++;
					modifiers.shift.wanted = true;
 
				} else if (k == 'alt') {
					kp++;
					modifiers.alt.wanted = true;
				} else if (k == 'meta') {
					kp++;
					modifiers.meta.wanted = true;
				} else if (k.length > 1) { // If it is a special key
					if (special_keys[k] == code)
						kp++;
 
				} else if (opt['keycode']) {
					if (opt['keycode'] == code)
						kp++;
 
				} else { // The special keys did not match
					if (character == k)
						kp++;
					else {
						if (shift_nums[character] && e.shiftKey) { // Stupid
							// Shift key
							// bug
							// created
							// by using
							// lowercase
							character = shift_nums[character];
							if (character == k)
								kp++;
						}
					}
				}
			}
			if (kp == keys.length
					&amp;&amp; modifiers.ctrl.pressed == modifiers.ctrl.wanted
					&amp;&amp; modifiers.shift.pressed == modifiers.shift.wanted
					&amp;&amp; modifiers.alt.pressed == modifiers.alt.wanted
					&amp;&amp; modifiers.meta.pressed == modifiers.meta.wanted) {
				callback(e);
 
				if (!opt['propagate']) { // Stop the event
					// e.cancelBubble is supported by IE - this will kill the
					// bubbling process.
					e.cancelBubble = true;
					e.returnValue = false;
 
					// e.stopPropagation works in Firefox.
					if (e.stopPropagation) {
						e.stopPropagation();
						e.preventDefault();
					}
					return false;
				}
			}
		}
		this.all_shortcuts[shortcut_combination] = {
			'callback' : func,
			'target' : ele,
			'event' : opt['type']
		};
		// Attach the function with the event
		if (ele.addEventListener)
			ele.addEventListener(opt['type'], func, false);
		else if (ele.attachEvent)
			ele.attachEvent('on' + opt['type'], func);
		else
			ele['on' + opt['type']] = func;
	},
 
	// Remove the shortcut - just specify the shortcut and I will remove the
	// binding
	'remove' : function(shortcut_combination) {
		shortcut_combination = shortcut_combination.toLowerCase();
		var binding = this.all_shortcuts[shortcut_combination];
		delete(this.all_shortcuts[shortcut_combination])
		if (!binding)
			return;
		var type = binding['event'];
		var ele = binding['target'];
		var callback = binding['callback'];
 
		if (ele.detachEvent)
			ele.detachEvent('on' + type, callback);
		else if (ele.removeEventListener)
			ele.removeEventListener(type, callback, false);
		else
			ele['on' + type] = false;
	}
}
您可能也喜欢：

DOM 事件模型
javascript的DOM函数方法
Unobtrusive Javascript
javascript 弹出子窗口
JavaScript中isNaN函数
无觅
Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up ]]> http://www.javachen.com/2010/03/handling-keyboard-shortcuts-in-javascript/feed/ 0 DOM 事件模型 http://www.javachen.com/2010/03/dom-event-model/ http://www.javachen.com/2010/03/dom-event-model/#comments Thu, 11 Mar 2010 06:46:40 +0000 JavaChen http://www.javachen.com/?p=1116 您可能也喜欢：
javascript的DOM函数方法
Unobtrusive Javascript
Handling Keyboard Shortcuts in JavaScript
在Dom4j中使用xpath解析xml
模仿QQ空间的警告提示栏 无觅 ]]> DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。
主流浏览器的事件模型

直到DOM Level3中规定后，多数主流浏览器才陆陆续续支持DOM标准的事件处理模型 — 捕获型与冒泡型。
目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型，即冒泡型，它模型的一部份被DOM采用，这点对于开发者来说也是有好处的，只使用 DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。

冒泡型事件(Bubbling):从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素.
捕获型事件(Capturing):Netscape Navigator的实现，它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素.
DOM标准事件模型:因为两个不同的模型都有其优点和解释，DOM标准支持捕获型与冒泡型，可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象。
首先是捕获式传递事件，接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

在《精通JavaScript+Jquery》一书里讲到。IE里冒泡事件从DOM层次结构的最低端往上一级级升，甚至可以到html节点，但在Firefox里html事件出现在body事件之前。

注册与移除事件监听器
1.IE下注册多个事件监听器与移除监听器方法
E浏览器中HTML元素有个attachEvent方法允许外界注册该元素多个事件监听器,例如  element.attachEvent(‘onclick’, observer);
*注意：在IE7中实测,注册多个事件时候，后加入的函数先被调用
要移除先前注册的事件的监听器,调用element的detachEvent方法即可，参数相同,例如 element.detachEvent(‘onclick’, observer);

2.DOM标准下注册多个事件监听器与移除监听器方法
实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同，它通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。
element.addEventListener(‘click’, observer, useCapture);
addEventListener方法接受三个参数。第一个参数是事件名称，值得注意的是，这里事件名称与IE的不同，事件名称是没’on’开头的;第二个参数observer是回调处理函数;第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用，默认true为捕获阶段。
*注意：在Firefox中实测,注册多个事件时候，先添加的监听事件先被调用。标准的DOM监听函数是严格按顺序执行的。
移除已注册的事件监听器调用element的 removeEventListener即可，参数不变.
element.removeEventListener(‘click’, observer, useCapture);

3.直接在DOM节点上加事件

如何取消浏览器事件的传递与事件传递后浏览器的默认处理
取消事件传递是指，停止捕获型事件或冒泡型事件的进一步传递。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。
事件传递后的默认处理是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。

取消浏览器的事件传递:
在IE下,通过设置event对象的cancelBubble为true即可。
function someHandle() {
window.event.cancelBubble = true;
}

DOM标准通过调用event对象的stopPropagation() 方法即可。
function someHandle(event) {
event.stopPropagation();
}
因些，跨浏览器的停止事件传递的方法是:
function someHandle(event) {
event = event || window.event;
if(event.stopPropagation)
event.stopPropagation();
else event.cancelBubble = true;
}

取消事件传递后的默认处理
在IE下,通过设置event对象的returnValue为false即可。
function someHandle() {
window.event.returnValue = false;
}

DOM标准通过调用event对象的preventDefault()方法即可。
function someHandle(event) {
event.preventDefault();
}
因些，跨浏览器的取消事件传递后的默认处理方法是：
function someHandle(event) {
event = event || window.event;
if(event.preventDefault)
event.preventDefault();
else event.returnValue = false;
}

事件对象
在IE浏览器中事件对象是window对象的一个属性event，并且event对象只能在事件发生时候被访问，所有事件处理完后，该对象就消失了。而标准的DOM中规定event必须作为惟一的参数传给事件处理函数
故为了实现兼容性，通常采用上述的方法：
function someHandle(event) {
if(window.event)
event=window.event；
}
值得说明的是：

在两种浏览器处理事件中，type属性是各种浏览器所兼容的，他表示获取的事件类型，返回字符串。
在检测Shift，Alt，Ctrl三个键时，两种浏览器事件使用的方法也是一样的。
在IE中，事件的对象包含在event的srcElement属性中，而在标准的DOM浏览器中，对象包含在target属性中。

为了处理两种浏览器兼容性，举例如下：
function handle(oEvent){
if(window.event) oEvent = window.event;        //处理兼容性，获得事件对象
var oTarget;
if(oEvent.srcElement)                //处理兼容性，获取事件目标
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
alert(oTarget.tagName);                //弹出目标的标记名称
}
window.onload = function(){
var oImg = document.getElementsByTagName(“img”)[0];
oImg.onclick = handle;
}

您可能也喜欢：

javascript的DOM函数方法
Unobtrusive Javascript
Handling Keyboard Shortcuts in JavaScript
在Dom4j中使用xpath解析xml
模仿QQ空间的警告提示栏
无觅
By the time your rss reader get this post here is 2 comments ,Welcome you come to leave your opinion !]]> http://www.javachen.com/2010/03/dom-event-model/feed/ 2 JavaScript 实现Web打印 http://www.javachen.com/2010/03/javascript-web-print/ http://www.javachen.com/2010/03/javascript-web-print/#comments Thu, 11 Mar 2010 02:25:00 +0000 JavaChen http://www.javachen.com/?p=1107 您可能也喜欢：
Unobtrusive Javascript
JavaScript数据类型
JavaScript中的Date日期相加
JavaScript验证Email
javascript 弹出子窗口 无觅 ]]> 在Web中想用JavaScript实现打印功能，需要一个浏览器控件WebBrowser。WebBrowser是IE内置的浏览器控件，无需用户下载，只需要在页面简单的设置，就可以Dom方法获取到该对象.

WebBrowser 控件为 WebBrowser ActiveX 控件提供了托管包装。托管包装使您可以在 Windows 窗体客户端应用程序中显示网页。使用 WebBrowser 控件，可以复制应用程序中的 Internet Explorer Web 浏览功能，还可以禁用默认的 Internet Explorer 功能，并将该控件用作简单的 HTML 文档查看器。此外，可以使用该控件将基于 DHTML 的用户界面元素添加到窗体中，还可以隐瞒这些元素在 WebBrowser 控件中承载的事实。通过这种方法，可以将 Web 控件和 Windows 窗体控件无缝地整合到一个应用程序中。
WebBrowser 控件包含多种可以用来实现 Internet Explorer 中的控件的属性、方法和事件。例如，可以使用 Navigate 方法实现地址栏，使用 GoBack、GoForward、Stop 和 Refresh 方法实现工具栏中的导航按钮。可以处理 Navigated 事件，以便使用 Url 属性的值更新地址栏，使用 DocumentTitle 属性的值更新标题栏。

用WebBrowser实现打印方法如下：

1．引入一个WebBrowser：

<object id=”WebBrowser” classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=”0″ width=”0″>
</object>

2. 隐藏不打印的页面元素和分页
CSS 有个Media 属性，可以分开设置打印和显示的格式。
如 <style media=”print” type=”text/css”> …</style> 中间的格式将只在打印时起作用，不会影响显示界面。
所以可以设定
<style media=”print” type=”text/css”>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
然后给不想打印的页面元素添加： ，那就不会出现在打印和打印预览中了。 想分页的地方添加： <div></div> 就可以了。

3. 页面设置和打印预览

常用的：
WebBrowser.ExecWB(1,1) 打开
WebBrowser.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口
WebBrowser.ExecWB(4,1) 保存网页
WebBrowser.ExecWB(6,1) 打印
WebBrowser.ExecWB(7,1) 打印预览
WebBrowser.ExecWB(8,1) 打印页面设置
WebBrowser.ExecWB(10,1) 查看页面属性
WebBrowser.ExecWB(15,1) 撤销
WebBrowser.ExecWB(17,1) 全选
WebBrowser.ExecWB(22,1) 刷新
WebBrowser.ExecWB(45,1) 关闭窗体无提示

在ExtJs中实现打印

简单来说就是将要打印的innerHtml内赋值给window.document.body.innerHTM，然后调用window.focus()：

function doPrint(){
var printArea=…….;//这个是取得要打印的那个组件
window.document.body.innerHTML=printArea.innerHTML;
window.focus();
WebBrowser.ExecWB(6,6);
}

window.print()

上面ExtJs打印代码用到了window.print() ，实际上，window.print() 是浏览器打印功能菜单的一种程序调用。

与点击打印功能菜单一样，不能精确分页，不能设置纸型，套打的问题更加无从谈起，只不 过，可以让用户不用去点菜单，直接点击网页中的一个按钮，或一个链接里面调用罢了。事实上，很多用户都是采用这种方式打印，但 是这种方式最致命的缺点是不能设置打印参数，比如纸型，页边距，选择打印机等等。
需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式，专门送 去打印，打印后又处理回来。

分享一个国内打印工具 JatoolsPrinter：官方网站

jatoolsPrinter （杰表.打印控件）是一款实现网页套打的专用工具。作为web应用开发者，我们经常会遇到在浏览器中打印报表、票据的需求，这些需求浏览器本身的打印功能 一般不能满足， 如精确分页，套打等。这就需要有一种能解决常见的浏览器端打印问题的软件工具，这也是 jatoolsPrinter 的研发背景。

jatoolsPrinter 的特点是可以直接对web页面进行精确的分页打印。jatoolsPrinter 通过在网页中嵌入控件，解决了web客户端精确打印，批量打印，打印配置自动保留等问题。

您可能也喜欢：

Unobtrusive Javascript
JavaScript数据类型
JavaScript中的Date日期相加
JavaScript验证Email
javascript 弹出子窗口
无觅
By the time your rss reader get this post here is 7 comments ,Welcome you come to leave your opinion !]]> http://www.javachen.com/2010/03/javascript-web-print/feed/ 7