Question

我有一组3行，每行12个input[class='variant-amount']个框。某些输入字段具有与其关联的事件，例如"onkeypress"或"onkeyup"

我想使用.variant-amounts事件在"onkeypress"上应用全局事件监听器，但我不想覆盖那些已附加"onkeypress"的输入字段的操作事件

那么，有没有办法基本上设置一个事件，当它发生时它执行自己的代码并在执行自己的"onkeypress"事件后？（不修改任何输入框本身，必须通过其类访问它们）

Answer 1

function all(){ // code }
function press(){ 
  //code
  all();
}
function up(){ 
  // code 
  all();
}
elemenUp.addEventListener("keyup", up);
elementPress.addEventListener("keypress", press);

如果您在任何时候必须访问它，只需在all(argThis)中创建一个参数并将其传递给事件侦听器函数。

Answer 2

要保留事件处理程序的功能并扩展它，您必须覆盖事件处理程序，但存储对原始处理程序的引用并调用它。

我建议您在为每个input分配特定的事件处理程序后分配全局事件处理程序，在所有输入都有其处理程序后执行类似的操作：

// Query all the inputs and transform the result into a proper array
Array.prototype.slice.call(document.querySelectorAll('input[class="variant-amount"]'))
    .forEach(function (variantAmount) {
        var original = variantAmount.onkeypress;

        variantAmount.onkeypress = function () {
            // do your stuff

            // Call the original event handler forwarding both this and the arguments, which needs to be converted to a real array
            original.apply(this, Array.prototype.slice.call(arguments));
        };
    });

Answer 3

您需要在捕获阶段为按键事件订阅容器。这样，您的容器将在其子代之前接收按键：

var body = document.body;
// add handler of keypress in capturing phase
body.addEventListener("keypress", function(){ console.log("keypress body") }, true);

var input = document.querySelector("input");
input.addEventListener("keypress", function(){ console.log("keypress input") });

<div>
  <input value="foo" >
</div>

万一你错过了DOM上事件传播的捕获/冒泡原则：http://www.quirksmode.org/js/events_order.html

有没有办法去＆＃34;层＆＃34;一个Javascript事件？

3 个答案: