2017-11-09 11 views
0

イベントオブジェクトと別のパラメータ(たとえば文字列を渡すために使用する)を使用して関数を呼び出す方法を理解したいと思います。だから私はこのボタンを押して、イベントオブジェクトとパラメータをhtml p要素に追加すると、ボタンの色を変更するはずのこの例を設定しようとしました。これの全体のポイントは、イベントオブジェクトとそのパラメータに別の変数の両方を持つ関数をどのように呼び出すことができるかを理解することです。javascript-イベントオブジェクトと別のパラメータの両方を渡す関数を呼び出すにはどうすればよいですか?

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Random color event object example</title> 
     <style> 
      button { 
      margin: 10px; 
      font-size: 300%; 
      padding: 30px; 
      }; 
     </style> 
     </head> 
     <body> 
     <button>Change color</button> 
     <p></p> 
     <script> 
      var btn = document.querySelector('button'); 

      function random(number) { 
      return Math.floor(Math.random()*number); 
      } 

      function bgChange (e, em) { 
      var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; 
      e.target.style.backgroundColor = rndCol; 
      var emm = em; 
      document.querySelector('p').textContent = e + emm + 'hj'; 
      } 

      btn.addEventListener('click', function() { 
      bgChange("j"); 
      }); 
     </script> 
     </body> 
    </html> 

答えて

2

(あなたがやっているような)をあなたはラッパー関数を使用したいが、あなたは、ブラウザがその関数に渡されるイベントパラメータ処理する必要があります:実際に

btn.addEventListener('click', function(event) { 
    bgChange(event, "j"); 
}); 

あなたを

btn.addEventListener('click', function(event) { 
    bgChange(event || window.event, "j"); 
}); 
:「おそらく が、パラメータとしてeventオブジェクトに沿っていないパスを行うことをIEの古いバージョンを処理したいdは

イベントオブジェクトは、関数のパラメータとして特別なものは特にありません。これは単なるオブジェクトへの参照です。

+0

ありがとう!古いIEのバージョンが関数(イベント)を呼び出すかどうか、それは何もないはずだからイベントパラメータのために何を渡すのだろうか? – user8783104

+0

古いIEバージョンでは、パラメータは 'undefined'になります。イディオム 'イベント|| window.event'はその状況を処理します。パラメータ*が定義されていれば、それは他の関数に渡されます。そうでなければ、 'window.event'が渡されます。 – Pointy

関連する問題