イベントリスナーの実装の違いを吸収するために、よく以下のようなコードを書きます。
var setHandler = (function() { if (addEventListener) { return function(el, type, func) { el.addEventListener(type, func, false); }; } if (attachEvent) { return function(el, type, func) { el.attachEvent('on' + type, function() { func.call(el, window.event); }); }; } return function(el, type, func) { el['on' + type] = func; }; })();
関数型言語に慣れていないと、こういう定義の仕方が気持ち悪いのだそうです。
もちろん、手続き型言語のように、以下のようにも書きます。
var setHandler = addEventListener ? function(el, type, func) { el.addEventListener(type, func, false); } : attachEvent ? function(el, type, func) { el.attachEvent('on' + type, function() { func.call(el, window.event); }); } : function(el, type, func) { el['on' + type] = func; };
また、以下のようにも書けます。
var setHandler; if (addEventListener) { setHandler = function(el, type, func) { el.addEventListener(type, func, false); }; } else if (attachEvent) { setHandler = function(el, type, func) { el.attachEvent('on' + type, function() { func.call(el, window.event); }); }; } else { setHandler = function(el, type, func) { el['on' + type] = func; }; }
1番目よりも、2番目3番目の方が分りやすいとは決して言えないような気がします。という訳で、1番目が気持ち悪いと思う人は、早く慣れましょうというお話でした。
ところで、こういうコードは何と呼ぶのでしょう? Adaptor パターン? そんなに高尚なものではない?