javaScript-我们如何将一个eventListener设置为另一个eventListener的从属？

Question

my main question is how can we set two event listeners that the one of them acts based on the other one? for example: we have a lot of record that inside it we have many similar family,when we search based on family filter our records limited to a smaller amount of the whole table,but we have an other filter too that search for us between similar families(a second filter,based on name),and remember both filter fields(master aka family,slave aka name)must react to 'keyup' event and playing with results actively. sorry for my bad english. :)

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);
                }
            })();

in this js code i've two text fields,that the one of them is works fine and have eventListener. but for the second input(prefil2)i'cant set a event listener in a way to react with the results of (refil)the other input.

note: it's unrelative but if you want to test something with my code ask me to provide the html/css,if i add it here the code part will be too long and it's against the roles.tnx full code here

Answer 1

I just made a fiddle that calls an event after a different event.

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'))
});

Is this what you are looking for?

EDIT:

Sorry, your example is sort of a wall of text.

Check out this 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, '');
});

Use the first input box to display a message, use the second to filter out letters.