키 업에서 내 기능을 호출하려면 어떻게해야합니까?

Question

사용자가 입력 요소 안에 텍스트를 입력하면 실행하고 싶은 JavaScript 함수가 있습니다. 현재 console.log라면 함수가 실행되는 것을 볼 수 있습니다. 키 업 메소드를 사용하여 어떻게 실행시킬 수 있습니까?

관련 코드

은 다음과 같습니다.

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

페이지의 keyup 이벤트에 메소드를 바인딩해야합니다.

당신은 당신이 할 수있는 당신이 element로 입력 요소가 가정

document.addEventListener('keyup', $) 

또는를 시도 할 수

element.addEventListener('keyup', $) 

귀하의 기능을 사용하면 상태를 조사하기 위해 사용할 수있는 event 전달됩니다

요소를 사용하면 함수에서 해당 정보를 트리거하거나 트리거하지 않아도됩니다.

다음은 키 누르기에서 실행되는 기능이 changeColor 인 빠른 샘플입니다. 나는 이벤트 (ev)를 사용하지 않는하지만

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) 

, 나는 내가 그 변수를 사용할 수 기대하는 코드에 보여주고 싶다. 당신이 당신의 기능 $를 호출에주의 수도하는 (!) 참고로 http://codepen.io/bunnymatic/pen/yyLGXg

-

여기에 행동을 참조하십시오. 여러 프레임 워크 (예 : jQuery)는 해당 심볼을 사용하며 전역 변수 $을 재정의하거나 충돌하는 경우 프레임 워크가 해당 버전을 무시하는 충돌이 발생할 수 있습니다.