javaScript-如何將eventListener設置爲另一個eventListener的從屬？

Question

我的主要問題是我們如何設置兩個事件監聽器，其中一個是基於另一個監聽器？例如： 例如： 我們有很多記錄，裏面有很多類似的家庭，當我們根據家庭過濾器進行搜索時，我們的記錄只限於整個表格的一小部分，但我們還有另外一個過濾器來搜索我們在類似的家庭之間（第二個過濾器，基於名稱），並且記住兩個過濾器字段（主又名家庭，從屬又名）必須對'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代碼我兩個文本字段，它們中的一個是工作正常，並有事件監聽。 但對於第二個輸入（prefil2），i'cant設置一個事件監聽器，以對另一個輸入的結果作出反應。

注：這是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')) 
}); 

這是你在找什麼？

編輯：

對不起，你的例子是一種文字牆。

退房此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, ''); 
}); 

使用第一輸入框中顯示一個消息，使用所述第二過濾掉字母。