javaScript-как мы можем установить eventListener как подчиненный другой eventListener?

Question

Мой главный вопрос: как мы можем установить двух слушателей событий, что один из них действует на основе другого? например: У нас есть много записей, что внутри него у нас много похожих семейств, когда мы ищем на основе семейного фильтра наши записи, ограниченные меньшим количеством всей таблицы, но у нас есть и другой фильтр, который нас ищет между аналогичными семействами (второй фильтр, основанный на имени) и помните оба поля фильтра (мастер aka family, slave aka name), должны реагировать на событие «keyup» и активно играть с результатами. извините за мой плохой английский. :)

JavaScript:

(function() { 
       var frm = document.forms.frm1; 
       var dmsg = document.getElementById('dmsg'); 
       var clear = document.getElementById('clear'); 

       function displayGivenObjectInfo(event) { 
        var res; 
        eval('res = ' + frm.jsvar.value + ';'); 
        var resTable = filteredPropertiesTable(res, frm.pfilter.value); 

        var resStr = document.createElement('div'); 
        resStr.className = 'res'; 
        var rtitleStr = document.createElement('div'); 
        rtitleStr.className = 'rtitle'; 
        var text = document.createTextNode(frm.jsvar.value + '={' + res + '} ' + 'filtered by:'); 
        rtitleStr.appendChild(text); 
        var refil = document.createElement('input'); 
        refil.type = 'text'; 
        refil.className = 'refilter'; 
        refil.setAttribute('value', frm.pfilter.value); 
        rtitleStr.appendChild(refil); 
        var prefil2 = document.createElement('input'); 
        prefil2.type = 'text'; 
        prefil2.className = 'propfilter'; 
        prefil2.setAttribute('value',''); 
        rtitleStr.appendChild(prefil2); 
        var rtextStr = document.createElement('div'); 
        rtextStr.className = 'rtext'; 
        rtextStr.appendChild(resTable); 


        resStr.appendChild(rtitleStr); 
        resStr.appendChild(rtextStr); 

        dmsg.appendChild(resStr); 




        //     setup filter change event for the last added expression results 
        for (var i = 0; i < dmsg.getElementsByClassName('refilter').length; i++) { 
         var refilterInput = dmsg.getElementsByClassName('refilter')[i]; 
         refilterInput.addEventListener('keyup', function() { 
          var rtextDiv = refilterInput.parentNode.parentNode.getElementsByClassName('rtext')[0]; 
          while (rtextDiv.firstChild) { 
           rtextDiv.removeChild(rtextDiv.firstChild); 
          } 
          rtextDiv.appendChild(filteredPropertiesTable(res, refilterInput.value)); 
         }); 
        } 
        event.preventDefault(); // prevent referesh of page because of form post back 
       }; 


       function filteredPropertiesTable(res, filter) { 
        var regExp = new RegExp('\\S*' + filter + '\\S*', 'i'); // regular expression for filtering 
        var resTable = document.createElement('table'); 
        if (typeof res != 'string') 
         for (key in res) 
          if (regExp.test(key)) { 
           var tempr = document.createElement('tr'); 
           var tempdl = document.createElement('td'); 
           var text = document.createTextNode(key); 
           tempdl.appendChild(text); 
           var tempdr = document.createElement('td'); 
           text = document.createTextNode(res[key]); 
           tempdr.appendChild(text); 
           tempr.appendChild(tempdl); 
           tempr.appendChild(tempdr); 
           resTable.appendChild(tempr); 
          } 
        return resTable; 
       }; 

       function clearDisplay(event) { 
        dmsg.innerHTML = ''; 
        event.preventDefault(); 
       }; 
       if (frm.addEventListener) { 
        frm.addEventListener('submit', displayGivenObjectInfo); 
        clear.addEventListener('click', clearDisplay); 
       } else if (frm.attachEvent) { 
        frm.attachEvent('onsubmit', displayGivenObjectInfo); 
        clear.attachEvent('onclick', clearDisplay); 
       } 
      })(); 

в этом JS код, который я два текстовых поля, что один из них работает отлично и есть EventListener. , но для второго входа (prefil2) i'cant установил прослушиватель событий, чтобы реагировать с результатами (refil) другого ввода.

примечание: это unrelative, но если вы хотите испытать что-то с моим кодом просят меня предоставить HTML/CSS, если я добавить его здесь часть кода будет слишком долго, и это против roles.tnx full code here

Answer 1

Я только что сделал скрипку, которая вызывает событие после другого события.

here

<input id="test" type="text" /> 

JS

var inp = document.getElementById('test'); 
inp.addEventListener('click', function (e) { 
    alert('click'); 
}) 
inp.addEventListener('keyup', function (e) { 
    alert('keyup') 
    this.dispatchEvent(new Event('click')) 
}); 

Это то, что вы ищете?

EDIT:

К сожалению, ваш пример является своего рода стеной текста.

Проверить это fiddle

search: <input id="test" type="text" /> <br/> 
filter: <input id="test2" type="text" /><br /> 
<h1 id="pie"></h1> 

JS

var inp = document.getElementById('test'); 
var inp2 = document.getElementById('test2'); 
var h = document.querySelector('h1#pie'); 

inp.addEventListener('keyup', function(e){ 
    h.innerText = this.value; 
    inp2.dispatchEvent(new Event('keyup')) 
}) 
inp2.addEventListener('keyup', function(e){ 
    var reg = new RegExp(this.value, 'g'); 
    h.innerText = inp.value.replace(reg, ''); 
}); 

Используйте первое поле ввода, чтобы отобразить сообщение, используйте второй, чтобы отфильтровать письма.