Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
将本机Javascript多事件复制到多个元素_Javascript - Fatal编程技术网

将本机Javascript多事件复制到多个元素

将本机Javascript多事件复制到多个元素,javascript,Javascript,我有下面的代码 [...document.getElementsByClassName("numericOnly")].forEach(node => { console.log(node) node.addEventListener('keypress', function (event) { console.log(event) }, false);

我有下面的代码

[...document.getElementsByClassName("numericOnly")].forEach(node => {
                console.log(node)
                node.addEventListener('keypress', function (event) {
                    console.log(event)
                }, false);
                node.addEventListener('keyup', function (event) {
                    console.log(event)
                }, false);
            });
但我想试试下面这种不起作用的东西

[...document.getElementsByClassName("numericOnly")].forEach(node => {
                console.log(node)
                node.addEventListener('keypress,keyup', function (event) {
                    console.log(event)
                }, false);
          });
也像下面一样尝试,但这是嵌套的

 ["keypress", "keyup"].forEach(function (event) {
                    [...document.querySelectorAll('.numericOnly')].forEach(node => {
                        console.log(node)
                        node.addEventListener('keypress', function (event) {
                            console.log(event)
                        }, false);
                    })
                });
不管怎么说,没有嵌套的东西就可以得到这个

[...document.getElementsByClassName("numericOnly")].forEach(node => {
                console.log(node)
                node.addEventListener('keypress,keyup', function (event) {
                    console.log(event)
                }, false);
          });
谢谢

根据,您不能在一次通话中附加多个事件名称

但是,您可以创建一个实用函数,该函数通常适用于给定eveny列表的任何组合

主意 创建一个接受以下内容的函数: 选择器:这将允许您根据任何属性获取元素。 EventList:这是需要附加的事件的逗号分隔列表。 处理程序:这是传递事件的实际公共处理程序 选项:决定何时执行所述事件冒泡/捕获阶段。 下面是此类函数的一个示例以及可能的调用

函数寄存器EventHandlerSelector、事件、处理程序、选项{ […document.querySelectorAllselector].forEachnode=>{ events.split','.forEachfunctioneventName{ node.addEventListenereventName,处理程序,选项; } }; } const handler=functionevent{ console.logevent }; registerEventHandler'.numericOnly',keypress,keyup',handler,false;
registerEventHandler'.numericAndAlphabet',keypress,change',handler,false如果您的问题是如何将eventhandler绑定到多个事件,那么答案是:要么您不绑定,要么您以称为“嵌套”的方式执行:

document.querySelectorAll'.numeric only'.forEachnode=>{ ['keypress','keyup'].forEachevent=>{ console.log`binding${event}to`,node node.addEventListenerevent,=>{ console.logevent },假; } };
你的第一个例子有什么问题?老实说,我不知道你在找什么?您可以创建一个类似的包装器,或者将整个代码放在一个通用函数中,该函数接受选择器并附加事件,就像您的第三个代码段在使用事件代替硬编码的按键时所起的作用一样。尽管你两次使用了变量事件,但OP的问题中没有提到吗?第三个代码片段?@Rajesh只是类似,为了让它运行,应用了一些更改。关键是,OP的代码已经在运行了。所以切换循环不会改变任何东西。这是我讨论过的,并不意味着微小的改变,问题是,有没有办法将多个事件绑定到多个元素,而无需嵌套循环或绑定它separately@Rajesh他称之为nested的代码无法按预期方式工作,因为它只绑定了一个按键注:如果您认为此答案中有任何不正确/不需要的内容,请将你的建议和你的意见一起分享,你能让我知道下面的链接是不正确的吗work@Md.ParvezAlam您能告诉我您期望的是什么吗?现在可以了。有一个请求,您能告诉我spread操作符在这里的工作情况吗[…document.getElementsByClassNamenumericOnly],因为没有它就无法工作