javascript-如何调用一个既包含事件对象又传递另一个参数的函数?

时间:2017-11-09 13:26:01

标签: javascript web

我想了解如何使用事件对象和另一个参数调用函数(我将用它来传入一个字符串)。所以我试图设置这个例子,当我按下按钮并将事件对象和参数添加到html p元素时,它应该改变按钮的颜色。这一点的全部意义在于理解我如何调用一个在其参数中同时包含事件对象和另一个变量的函数。

 <!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>

1 个答案:

答案 0 :(得分:2)

你使用了一个包装函数(就像你正在做的那样),但你必须处理浏览器传递给 函数的事件参数:

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

实际上,您可能希望处理传递event对象的旧版本IE作为参数:

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

事件对象作为函数的参数没有什么特别之处。它只是对象的引用。