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

我有一个JavaScript函数，一旦用户在输入元素中输入文本，我就想启动它。目前，我只能在控制台.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;


};

var$=函数（选择器）{
var元素=[]，
我
伦恩，
库鲁科尔，
元素，
标准杆数
fns；
if（selector.indexOf（'#'）>0）{
选择器=选择器。拆分（“#”）；
选择器=“#”+选择器[selector.length-1]；
}
选择器=选择器。拆分（“”）；
fns={
id：功能（sel）{
返回文档.getElementById（sel）；
},
get：函数（c_或e、sel、par）{
变量i=0，len，arr=[]，get_what=（c_或_e=='class'）？“getElementsByClassName”：“getElementsByTagName”；
if（标准长度）{
而（第[I]款）{
var temp=par[i++][get_what]（sel）；
Array.prototype.push.apply（arr、Array.prototype.slice.call（temp））；
}
}否则{
arr=par[get_what]（sel）；
}
返回（arr.length==1）？arr[0]：arr；
}
};
len=选择器长度；
curr_col=文件；
对于（i=0；i-1）{
element=element.split（'.'）；
if（元素[0]）{
PAR＝FNS.GET（元素），元素〔0〕，PAR）；
对于（i=0；par[i]；i++）{
if（par[i].className.indexOf（元素[1]>-1））{
元素推送（第[i]段）；
}
}
curr_col=元素；
}否则{
curr_col=fns.get（'class'，元素[1]，par）；
}
}否则{
curr_col=fns.get（'elements'，element，par）；
}
}
返回元素；
};

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

你可以试试

document.addEventListener('keyup', $)

或者假设输入元素为

元素

element.addEventListener('keyup', $)

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

下面是一个快速示例，其中get在keypress上运行的函数是
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
），但我希望在代码中显示，我希望该变量可用

在这里看到它的作用-

作为旁注，在调用函数
$
时可能要小心。有几个框架（如jQuery）使用该符号，您可能会遇到冲突，您正在覆盖全局变量
$
，或者如果框架覆盖了您的版本，您可能会遇到冲突。
该函数只返回与选择器匹配的元素，而不处理它们。谢谢，您的答案非常清楚。但是，我刚刚注意到控制台中有一个错误。未捕获的TypeError:无法读取未定义的属性“indexOf”。这让我很困惑，因为我正在通过函数传递选择器，所以不确定为什么会发生这种情况。如果将事件与addEventListener绑定，您可能会发现函数实际上得到的是一个
事件
，而不是您期望的选择器。尝试console.log-ing循环中的
选择器
。您可能需要使用
选择器.target
（假设选择器实际上是向上键事件）。