hogehoge foobar Blog Style Beta

Web,Mac,Linux,JavaScript,Perl,PHP,RegExp,Git,Vim,Redmineなど技術的なことのメモや、ちょっと便利そうなものの紹介をしています。

addListenerでの関数の引数渡し

addListenerで引数付きの関数を指定する方法がいまいち分かっていなかったので、
調べてみました。

答えとしては、関数の指定で無記名関数を作成して記述すればOKでした。
関数の定義を指定してあげれば良いということですね。
非常にすっきりしました。

解決には以下のBBSを参考にさせていただきました。

TAG index BBS - addListener()やattachEvent()で引数
引数無し関数はこれでもOK

/* クロスブラウザ対応のaddListener */
var addListener = ( window.addEventListener ?
function(elm, event, func){
elm.addEventListener(event, func, false);
} :
function(elm, event, func){
elm.attachEvent('on' + event, func); //IE
}
);

/* onClick時に実行させたい関数 */
var func = function(){
alert("hogehoge"); /* hogehoge */
}

/* イベントの追加 */
var addFooEvent = function(){
var element = document.getElementById("btn");

/* onClickイベントの追加 */
addListener(element, 'click', func);
}

/* window.load時にイベントを追加 */
addListener(window, 'load', addFooEvent);


引数が必要な関数はこうする
/* クロスブラウザ対応のaddListener */
var addListener = ( window.addEventListener ?
    function(elm, event, func){
        elm.addEventListener(event, func, false);
    } :
    function(elm, event, func){
        elm.attachEvent('on' + event, func); //IE
    }
);

/* onClick時に実行させたい関数 */
var func = function(e, hoge, foo){
    alert(e);                   /* object MouseEvent */
    alert(hoge + foo);          /* 3 */
}

/* イベントの追加 */
var addFooEvent = function(){
    var element = document.getElementById("btn"); 

    /* onClickイベントの追加 */
    /* 無記名関数を作成し、戻り値として引数付きの関数を指定する。 */
    addListener(element, 'click', function(event){
        return func(event, 1, 2);
    });
}

/* window.load時にイベントを追加 */
addListener(window, 'load', addFooEvent);