Greasemonkey与DOMContentLoaded

昨天在hexy要求下写了一个小脚本，在豆瓣的邀请页面加了全选按钮。

按照习惯，我把处理DOM的代码放在了窗口的load事件的处理函数中：

window.addEventListener('load', function(e) {
	...
}, false);

但是hexy说页面上有很多图片（头像）的情况下，页面一显示出来没有全选那个checkbox，延迟好一会之后才出现。以前处理的页面因为比较简单，都没怎么在意这个问题，看来这次是不行了。各种JavaScript库里都有另外的途径来替代”load”，比如jQuery有ready函数，mootools有domready事件。而我们写Greasemonkey脚本，只需要考虑Firefox就好了，它有一个DOMContentLoaded事件，页面上解释得非常清楚：

Fired on a Window object when a document’s DOM content is finished loaded, but unlike “load”, does not wait till all images are loaded. Used for example by GreaseMonkey to sneak in to alter pages before they are displayed.

我们要的就是它。然而在把load替换为DOMContentLoaded之后，我发现更糟了，代码根本不执行了。一番搜索之后，我发现我从来就没仔细想过一个问题，Greasemonkey的脚本到底是什么时候执行的？这个页面解释了这个问题。

原来Greasemonkey的脚本就是在DOMContentLoaded这个事件触发后执行的，而这个事件对每次打开网页只有一次，脚本中再往这个事件添加处理函数当然是徒劳了！于是解决方案就是更简单地，把处理代码外面的皮剥掉，直接放出来就可以了。结果就是现在的这个样子。

可能是最初学写脚本的教程里就是教用load事件的，看起来又比较专业，我就一直这么用了，可见启蒙教育是多么重要，要不是这次教训，可能我就一辈子这么缺钙了。

实际上一般情况下对DOM的操作都不需要等到load事件，DOM结构完整之后就可以了，这样给用户的体验也会好很多。