addEventListenerで実行させた関数の戻り値を変数に代入したい

Question

実行環境：GoogleChrome

const btn = document.getElmentById( "button" );
let result;
const number = 1;

function a(){
    alert( number );
    if( number >= 1 ){
        return 1;
    }else{
        return 0;
    }
}

btn.addEventListener( "click", a, false );

htmlから取得したボタン要素をクリックすると、addEventListenerによって、a関数が呼び出されます。a関数は定数numberの値によって返す戻り値が異なりますが、この戻り値を変数resultに代入したいのですが、方法がわかりません。

result = btn.oncilick = login();

のような書き方はそもそもできませんし、

result = btn.addEventListener( "click" , a, false );
console.log( result );

とすることで、resultにaddEventListenerを代入しましたが、クリック前後のいずれもコンソールには「undefined」となっており、numberには何も定義されていないことがわかっています。

Answer 1

戻り値を変数に代入したい

端的に言うと、イベントリスナの戻り値を受け取ることはできません。

イベントリスナのようなコールバック関数は（同期的タイミングで）いつ実行されるかが定められていませんので、戻り値を直接受け取るのではなく、コールバック関数のスコープ外で予め宣言しておいた変数に代入して代用します。

EventListenerの管理 というご質問で、マウスイベントを例に回答させていただいことがあります。
（こちらでは、downPos を用いてイベント発火に関係なく参照できる変数を宣言しておき、リスナの返り値を受け取れないため、内部処理で代入しています）

ご参考になれば。

Answer 2

不具合の原因

resultにaddEventListenerを代入しましたが、クリック前後のいずれもコンソールには「undefined」となっており、numberには何も定義されていないことがわかっています。

既に回答されている通りですが、addEventListener 実行直後に返り値を参照しても、click イベント発火前なので、返り値は undefined になります

コールバック関数

期待通りの結果を得るには、click イベント発火直後に値を得る必要があります。

• clickイベント発火後+コールバック関数 - JSFiddle - Code Playground

<input id="test" type="button" value="test">
<script>
'use strict';
const listener = {
  number: 1,
  handleEvent: function handleClick (event) {
    clickEnd(this.number);
  }
};

function clickEnd(number) {
  console.log(number);
}

document.getElementById('test').addEventListener('click', listener, false);
</script>

コールバック関数 rev2

先のコードを「clickEnd関数もlistenerオブジェクトに格納」に変更すれば、変数スコープを汚さない実装になります。

• clickイベント発火後+コールバック関数 rev2 - JSFiddle - Code Playground

<input id="test" type="button" value="test">
<script>
'use strict';
document.getElementById('test').addEventListener('click', {
  number: 1,
  handleEvent: function handleClick (event) {
    this.clickEnd();
  },
  clickEnd: function clickEnd() {
    console.log(this.number);
  }
}, false);
</script>

参考情報

コールバック関数やPromiseで検索すると、参考情報が見つかります。

• 関数と宣言 · JavaScript Primer #jsprimer
• JavaScript Promiseの本

Re: kentaka さん

Comments

[think49]

余談ですが、

> const number = 1;

const 宣言された変数値は書き換え不可の為、変数 number の値は「常に1」です。
従って、「if( number >= 1 )」は常に true となり、条件式の意味がなくなります。
本回答では、number をオブジェクトのプロパティに置くことで書き換えを可能としています。

Answer 3

うけとった変数をつかえるのは結局clickした後なので、ロジックがおかしいです
あえてやるならこんな感じ

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
let result=0;
setInterval(()=>document.querySelector('#view').textContent=result,100); //resultを監視つづける
const btn = document.getElementById( "button" );
const number = 1;
function a(){
alert( number );
if( number >= 1 ){
result=1;
}else{
result=0;
}
}
btn.addEventListener( "click", a, false );
});
</script>

<input type="button" value="button" id="button">
<div id="view"></div>