イベントリスナーの場合どのようにして関数に名前を付けて再利用するのでしょうか？

Question

下記2つを最後に呼び出してまとめたいのですが、let shoppingCalc =と変数に入れてもfunction 変数名 とトランスパイルされません。

let shoppingCalc = document.getElementById('shoppingBtn').onclick = () => {
	
};


document.getElementById('shoppingBtnGram').onclick = () => {

};

//まとめる
let shoppingCalcAll = getIdshoppingBtn.addEventListener('click', ()=> {
    shoppingCalcGram();
	shoppingCalc();
});

イベントリスナーの場合どのようにして関数に名前を付けて再利用するのでしょうか？

Answer 1

shoppingBtn、shoppingBtnGramのイベントリスナー関数を別途定義して利用すればいいと思いますが。

function shoppingCalc(evt) {
}
function shoppingCalcGram(evt) {
}

document.getElementById('shoppingBtn').onclick = shoppingCalc;
document.getElementById('shoppingBtnGram').onclick = shoppingBtnGramClick;

};

getIdshoppingBtn.addEventListener('click', ()=> {
    shoppingCalcGram();
    shoppingCalc();
});

Comments

[退会済みユーザー]

ありがとうございます。

.onclick = shoppingBtnGramClick;
の代入されるところに始めに定義した関数名のみを指定すればよいという事でしょうか？

()はなぜいらないのでしょうか？
初心者ですいません。

[turbgraphics200]

はい、()はいりません。

[退会済みユーザー]

ありがたいです。理由は教えていただけませんか？

[turbgraphics200]

()つけると、関数を実行した結果がonclickに設定されます。関数自体を設定したい場合は、()をつけずに設定します。

[退会済みユーザー]

ありがとうございます。
恐らく()を付けないと関数も変数の一種なので、変数と同じように処理する前の関数そのものがonclickに代入される。
()があると関数を実行という意味になるので、関数の実行結果が代入され、関数自体を代入できないので、今回は関数自体を代入したかったので、()を付けなかったという事でしょうね。

[turbgraphics200]

そういうことです。

[退会済みユーザー]

ありがとうございました。

Answer 2

function hogeFunction(tag) {console.debug("hogeFunction:" + tag);}

function hogeEvent(callback, text) {
    callback(text);
}

var hogeEventListener1 = null;
var hogeEventListener2 = null;

(() => {
    hogeEventListener1 = (text) => {
        hogeFunction(text);
    };

    let func = hogeFunction;
    hogeEventListener2 = (text) => {
        func(text);
    };

    hogeEvent(hogeEventListener1, "before");
    hogeEvent(hogeEventListener2, "before");
})();

var hogeFunction = function(tag) {console.debug("newFunction:" + tag);};

(() => {
    hogeEvent(hogeEventListener1, "after");
    hogeEvent(hogeEventListener2, "after");
})();

//出力
//hogeFunction:before
//hogeFunction:before
//newFunction:after 
//hogeFunction:after

JavaScript におけるすべての関数は、実際には Function オブジェクトです。

Comments

[退会済みユーザー]

＞＞＞
関数オブジェクト（かんすうオブジェクト、英: function object）は、プログラミング言語において、関数（サブルーチンないしプロシージャ）を、オブジェクトとしたものである。手続きオブジェクトとも言う（プロシージャ＝手続き）。なお、ここでのオブジェクトの語は、いわゆるオブジェクト指向のそれに限らず、「第一級オブジェクト」という語におけるのと同じ、メモリ上に空間を確保されたもの、といった意味である。関数が第一級オブジェクトである場合は特に第一級関数と言う。

このことでしょうか？
関数という名前のオブジェクト＝箱
という事でしょうか？

[abs123]

オブジェクト＝箱という表現は何とも言えませんが、
説明の方はそれで大丈夫だと思います。
詳しくは下記のページを見てください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope

[退会済みユーザー]

メインメモリーの予約した一部領域に式が記憶されている＝関数といった方がより正確なのですかね。
よく名札や、箱を変数のたとえに使いますが、関数やオブジェクトを箱という人もいるのでそのように言いました。

Answer 3

getIdshoppingBtn.addEventListener('click', ()=> {
    shoppingCalcGram();
    shoppingCalc();
});

の部分の、

 ()=> {
    shoppingCalcGram();
    shoppingCalc();
}

ここをまとめたいのであれば、

function matometai(){
    shoppingCalcGram();
    shoppingCalc();
}
getIdshoppingBtn.addEventListener('click', matometai());

という形でしょうか。

Comments

[退会済みユーザー]

ありがたいです。

('click', matometai());ここで関数を呼び出すのですね。
私はここに変数を入れて代入してみたのですがエラーになりました。

全く独立したところに関数を作ってイベントリスナー（jqueryではイベントファンクションといいますが、生のJSはこの言い方はしないのですよね？）の無名関数に入れ込めばいいのですね。

[ma3tk]

具体的なコードがわからないのでエラーについてなんとも言えませんが、
http://qiita.com/Lewuathe/items/5827a9b429aa71c4f76e
こんな感じの実装をすると解決できるのではないでしょうか。

[退会済みユーザー]

ありがとうございました。

[kei344]

To: ma3tkさん
> getIdshoppingBtn.addEventListener('click', matometai());
は
getIdshoppingBtn.addEventListener('click', matometai);
では？

[退会済みユーザー]

そうみたいですね。関数の処理結果ではなく関数そのものを引数としてaddEventlisner関数に渡したい時は()はつけないようですね。