javascript イベントハンドラ　実行タイミングについて

JavaScriptの課題について

JavaScriptの研修を受けている初心者です。
課題で不明な点がいくつかあり、ご質問させて頂きます。

課題は以下の通りです。

「背景黒」ボタンを押すと、ページ全体の背景色が黒で文字色が白、「背景白」ボタンを押すと、ページ全体の背景色が白で文字色が黒となるようプログラムを追記してください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>実行タイミング</title>
6    <script>
7        /* 課題処理を追加 */
8        function changeBack(color){
9            var color = color;
10            if (color === 1){
11                var background = document.getElementById('background');
12                background.style.backgroundColor = '#000000';
13                var font = document.getElementById('font');
14                font.style.color = '#ffffff';
15            }
16            else if (color === 2){
17                var background = document.getElementById('background');
18                background.style.backgroundColor = '#FFFFFF';
19                var font = document.getElementById('font');
20                font.style.color = '#000000';
21            }
22        }
23        window.onload = function(){
24            var black = document.getElementById('black');
25            var white = document.getElementById('white');
26            black.addEventListener('click',changeBack(1),false);
27            white.addEventListener('click',changeBack(2),false);
28        }
29    </script>
30</head>
31<body id = "background">
32    <p id = 'font'>ボタンクリックにより背景色と文字色を変化</p>
33    <button id = "black">背景黒</button>
34    <button id = "white">背景白</button>
35</body>
36</html>

発生している問題、疑問点

1, function(){}の中にある'click'が正常に作用していない
（例えば、背景⇒白文字⇒黒にするためのコードだけ消すと、ボタンを押していないにも関わらず、初めから背景⇒黒文字⇒白になってしまう。）

間違っているとしたら、どの部分を、どのように修正すれば良いか。
（なぜ、間違っているかもご教示頂けるとありがたいです。）

大変お手数をおかけしますが、できれば小中学生でも分かるような説明で
ご解説頂けると幸いです。

行動規範の内容に同意します

回答2件

addEvetnListener の第二引数に関数の実行結果を渡した場合

JavaScript
1black.addEventListener('click',changeBack(1),false);
2white.addEventListener('click',changeBack(2),false);

changeBack(1), changeBack(2) の返り値は undefined なので、上記コードは下記と等価です。

JavaScript
1black.addEventListener('click',undefined,false);
2white.addEventListener('click',undefined,false);

addEventListener の第二引数は関数または handleEvent を持つオブジェクトを指定して下さい。

イベントハンドラ関数に引数を渡す

イベントハンドラ関数の引数は event オブジェクトが予約されているので、通常の方法では外部から引数を指定することは出来ず、特殊な方法を利用する事になります。

handleEvent を持つオブジェクトを指定して this 束縛
Function.prototype.bind

JavaScript
1black.addEventListener('click', {handleEvent: changeBack, color: 'black'}, false);
2white.addEventListener('click', {handleEvent: changeBack, color: 'white'}, false);
3
4black.addEventListener('click', changeBack.bind(black, 'black'), false);
5white.addEventListener('click' changeBack.bind(white, 'white'), false);

event.target

イベントハンドラ関数内では event.target でイベントが発生した要素ノードを得られます。
対象の要素ノードは id="black" または id="white" になっているはずなので、element.id を見る事で条件分岐させることが可能です。
先述の「イベントハンドラ関数に引数を渡す」はやや特殊な実装なので、私はこの方法を推します。

JavaScript
1function handleEvent (event) {
2  switch (event.target.id) {
3    case 'black':
4      break;
5    case  'white':
6      break;
7    default:
8      throw new Error;
9  }
10}

Re: gorira6 さん

投稿2017/04/11 17:09

think49

総合スコア18162

gorira6

2017/04/11 17:36

詳しいご解説有り難うございます！

行動規範の内容に同意します

ベストアンサー

JavaScript
1// black.addEventListener( 'click', changeBack(1), false );
2// ↓
3   black.addEventListener( 'click', function(){ changeBack(1) }, false );

投稿2017/04/11 16:26

kei344

総合スコア69407

gorira6

2017/04/11 17:18

ご回答頂き有り難うございます！無事、問題が解決できました。また、度重なる質問で申し訳ないのですが、よろしければ、無名関数をchangeback（１）に使う前に clickが効かなかった原因、無名関数を使うことで問題が解決した理由を教えて頂いてもよろしいでしょうか？お手数かとは思いますが、よろしくお願い致します。

gorira6

2017/04/11 17:24

すみません。自己解決しました。失礼しました！

行動規範の内容に同意します

あなたの回答