javaScript-我们如何将一个事件监听器设置为另一个事件监听器的从属

javaScript-how can we set a eventListener as a slave of the other eventListener?

本文关键字：监听器 事件 设置 另一个 一个 我们 javaScript-      更新时间：2023-09-26

我的主要问题是我们如何设置两个事件侦听器，其中一个基于另一个事件侦听器？例如：我们有很多记录，里面我们有很多相似的家族，当我们根据家庭过滤器搜索时，我们的记录仅限于整个表中的较小数量，但我们也有另一个过滤器，可以在相似的家族之间搜索我们(第二个过滤器，基于名称(，并记住两个过滤器字段(主又名家族，从属名称(必须对"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(，我无法以某种方式设置事件侦听器以与(refil(另一个输入的结果做出反应。

注意：这是不相关的，但如果你想用我的代码测试一些东西，请我提供 html/css，如果我在这里添加它，代码部分会太长，并且它反对 roles.tnx完整代码在这里

我只是做了一个小提琴，在不同的事件之后调用一个事件。

这里

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

这是你要找的吗？

编辑：

抱歉，您的示例有点像文本墙。

看看这个小提琴

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, '');
});
使用第一个输入框

显示消息，使用第二个输入框过滤掉字母。

相关文章：