Question

我想通过多个事件调用一个函数＆＃34; onBlur＆＃34;，＆＃34; onKeyup＆＃34;和＆＃34; onClick＆＃34;但是我的剧本只适用于第一次活动。

我的代码：

<input type="text" onBlur="getprice(this),getdesc(this)" onClick="getprice(this),getdesc(this)" id="item" name="item[]">

Answer 1

<input type="text" onBlur="getprice(this);getdesc(this)" onClick="getprice(this);getdesc(this);" id="item" name="item[]">

当您将函数签名为内联的dom元素时，请记住，在双引号内，您正在编写javascript代码。所以对于每个函数，都应该有一个';'最后，快乐的编码兄弟！

Answer 2

看一下我在var events中定义目标事件的代码。您可以在那里添加多个事件以添加到您的功能中。

您可以在浏览器Console中查看输出。

控制台输出

__EVENT__ click
__getPrice__ Empty
__getDesc__ Description
__EVENT__ blur
__getPrice__ Ok
__getDesc__ Description
__EVENT__ click
__getPrice__ Ok
__getDesc__ Description
__EVENT__ click
__getPrice__ 9874521
__getDesc__ Description
__EVENT__ blur
__getPrice__ 9874521
__getDesc__ Description

代码段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Attach Multiple Events</title>
  <style>
    input[type="text"] {
      border: none;
      outline: none;
    }
  </style>
</head>
<body>
  <input type="text" id="textInput" name="textInput[]" placeholder="Write your input...">
  <script>
    (function() {
      // Define variables
      var
        events = ['click', 'blur'],
        textInput = document.querySelector('#textInput');

      // Define functions
      var
        getPrice = function(textInputRef) {
          console.log('__getPrice__', textInputRef.value == '' ? 'Empty' : textInputRef.value);
        },
        getDesc = function(textInputRef) {
          console.log('__getDesc__', 'Description');
        };

      events.forEach(function(e) {
        textInput.addEventListener(e, function() {
          console.log('__EVENT__', e);
          getPrice(this);
          getDesc(this);
        }, false);
      });
    })();
  </script>
</body>
</html>

要更好地控制Events，最好将事件分别附加到目标元素。

只是一个建议！不要在HTML中编写内联JavaScript。最好分开编写JavaScript（最好是在单独的文件中），原因如下。

缩小HTML文件大小
支持缓存
改善辅助功能
简易代码维护

希望它有所帮助！

如何在单个HTML文本字段上应用多个事件？

2 个答案: