javascript - 如何在 keyup 上调用我的函数？

Question

我有一个 JavaScript 函数，当用户在输入元素内输入文本时，我想触发该函数。目前，如果我 console.log 它，我只能看到该函数触发。如何使用 keyup 方法让它触发？

相关代码如下。

var $ = function (selector) {
    var elements = [],
      i,
      len,
      cur_col,
      element,
      par,
      fns;

      if(selector.indexOf('#') > 0) {
        selector = selector.split('#');
        selector = '#' + selector[selector.length -1];
      }

      selector = selector.split(' ');

      fns = {
        id: function (sel) {
            return document.getElementById(sel);
        },
        get : function(c_or_e, sel, par) {
            var i = 0, len, arr = [], get_what = (c_or_e === 'class') ? "getElementsByClassName" : "getElementsByTagName";
            if (par.length) {
                while(par[I]) {
                    var temp = par[i++][get_what](sel);
                    Array.prototype.push.apply(arr, Array.prototype.slice.call(temp));
                }
            } else {
                arr = par[get_what](sel);
            }
            return (arr.length === 1)? arr[0] : arr;
        }
      };

      len = selector.length;
      curr_col = document;

      for ( i = 0; i < len; i++) {
        element = selector[i];
        par = curr_col;

        if( element.indexOf('#') === 0) {
            curr_col = fns.id(element.split('#'[1]));
          } else if (element.indexOf('.') > -1) {
            element = element.split('.');

            if (element[0]) {
                par = fns.get('elements', element[0], par);
                for ( i =0; par[i]; i++) {
                    if(par[i].className.indexOf(element[1]> -1)) {

                        elements.push(par[i]);
                    }
                }
                curr_col = elements;
            } else {
                curr_col = fns.get('class', element[1], par);
            }
          } else {
            curr_col = fns.get('elements', element, par);
          }
      }
    return elements;


};

Answer 1

您需要将您的方法绑定(bind)到页面上的 keyup 事件。

你可以试试

document.addEventListener('keyup', $)

或者假设您将输入元素作为元素，您可以这样做

element.addEventListener('keyup', $)

您的函数将传递事件，如果您需要该信息来触发或不触发函数中的内容，您可以使用该信息来调查元素的状态。

这是一个快速示例，其中在按键上运行的函数是 changeColor。

var COLORS = ['red', 'blue','yellow', 'black']
var NCOLORS = COLORS.length;
function changeColor(ev) {
  var div = document.getElementById('colored');
  var colorIdx = parseInt(Math.random() * NCOLORS);
  console.log(colorIdx);
  var newColor = COLORS[colorIdx];
  div.style.color = newColor
  console.log("New color ", newColor)
}
document.body.addEventListener('keyup', changeColor)

虽然我没有使用事件 (ev)，但我喜欢在代码中表明我希望该变量可用。

在这里查看它的实际效果 - http://codepen.io/bunnymatic/pen/yyLGXg

作为旁注，您在调用函数 $ 时可能要小心。多个框架(例如 jQuery)使用该符号，并且您可能会在覆盖全局变量 $ 或框架覆盖您的版本(如果有)时遇到冲突。