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

Question

我想通过多个事件 "onBlur"、"onKeyup" 和 "onClick" 调用函数，但我的脚本仅在第一个事件上起作用。

我的代码：

<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 文本字段上应用多个事件？

How to apply multiple events on single HTML text field?

javascript

html

javascript-events