【メモ】イベントハンドラをつかまえる（SeaHorse/Greasemonkey）

先日、はてなブックマークエントリページのアイコンを大きくスクリプトを作りましたが。
導入した結果表示されたボタンが非常に不細工なことになっていて凄く嫌でした。

要は、僕がJavaScriptをあんまりよく分かって無くて、
ボタンをクリックしたときにJavaScriptを動かすには、どうしたらいいのか…
ということだったんですが。

その辺理解できたので、メモっておきます。

JavaScriptでイベントハンドラをつかまえて何か実装するためには、
例えば、「addEventListener」を使います。
イベントハンドラに処理を割り当てる…くらいの意味でしょうかね。
（モダンブラウザのみ対応、IE6では動きません）

addEventListener

Sleipnir/SeaHorseでは動きません（IE6の影響）が、
attachEventを使えば同じような処理が出来ます。

例

var btn = document.getElementById("test-button");
btn.addEventListener ? btn.addEventListener('click', 処理, false) : b.attachEvent('onclick', 処理);

この例の場合には、test-buttonというIDが付いたアイテムをクリックした場合に、
“処理”で指定された処理を行います。

今回の場合は、それぞれ共通の処理を行い、
処理数も1つしかないので実行順序は問題になりませんでしたが、
addEventListenerとattachEventとでは実行順序が違うそうなので、注意が必要です。

イベントに処理を追加する

ついでに、ページロード後に処理する場合の処理について。

Sleipnir/SeaHorseだと、次のように書いても動きます。

window.load = function() {

　… 処理 …

}

ただ、FireFox/Greasemonkeyでは動かないので、それも含めてこう書かないといけないようです。
こちらはSleipnir/SeaHorseでも動きます。

(function() {

　… 処理 …

})();

そんな感じで処理を見直したスクリプトはこちら。
多少はマシになったかと。

// ==UserScript==
// @name            Show Large & Enlarge HatenaBookmark Icons
// @namespace       http://www.nobodyplace.com/
// @author          is
// @include         http://b.hatena.ne.jp/entry/*
// @description     Add a button to enlarge HatenaBookmark user icons.
// ==/UserScript==
// version 0.1 2008.03.26 リリース
// version 0.2 2008.04.06 ボタンと処理を分離
//

(function() {
var e = document.getElementById("comments");
e.innerHTML+='';
var b = document.getElementById("hbm-icon-larger-button");
var t = function(){
var v = b.value;
changeIcon(v);
b.value = (v == 'S') ? 'L' : 'S';
}
b.addEventListener ? b.addEventListener('click', t, false) : b.attachEvent('onclick', t);
changeIcon('L');
})();


function changeIcon(v) {
var a,s,o,n,w,h;
a = document.getElementsByTagName('img');
s = 'src';
o = (v == 'S') ? 'profile.gif' : 'profile_s.gif';
n = (v == 'S') ? 'profile_s.gif' : 'profile.gif';
w = (v == 'S') ? 16 : 32;
h = (v == 'S') ? 16 : 32;
for(i=0;i<a.length;i++){
l = a[i].getAttribute(s);
if (!l) continue;
r = new RegExp(o + '$');
if (!l.match(r)) continue;
a[i].setAttribute(s,l.replace(o, n));
a[i].setAttribute('width', w);
a[i].setAttribute('height', h);
}
}

例

Related Posts