Question

我想将JavaScript函数分配给已经具有处理函数的事件。新功能不应更改或删除（取消分配）现有功能。

举个例子：

我有一个名为exFunction()的功能已分配给document.onmousemove。我有另一个函数newFun()来分配给同一个事件。我想要发生的是当document.onmousemove事件发生时，两个函数都被触发。

newFun()不是静态函数。根据网页，它将更改。（否则我可以写另一个调用这两个函数的函数）。

仅限纯JavaScript

Answer 1

使用addEventListener，您可以应用多种功能。

document.addEventListener('mousemove', exFunction)
document.addEventListener('mousemove', newFun)

Answer 2

您也可以这样做

document.addEventListener("mousemove", function() {
myFunction();
someother();

}）;

Answer 3

如其他答案中所述，您可以轻松地为事件分配多个eventListeners 请注意，函数的名称是要执行的代码的地址，并且此地址是不可变的。该片段显示了什么有效，什么无效。

＆＃13;

var myDiv = document.getElementById('my-div');

function foo1(e) {
  console.log('foo1');
  if (e.altKey)
    foo1 = foo2; //this doesn't work
};

function foo2(e) {
  console.log('foo2');
  if (e.shiftKey) {
    myDiv.removeEventListener('click', foo2);
    myDiv.addEventListener('click', foo3);
  }
};

function foo3(e) {
  console.log('foo3');
  if (e.shiftKey) {
    myDiv.removeEventListener('click', foo3);
    myDiv.addEventListener('click', foo2);
  }
};
//assign **addresses** of functions to eventListener
myDiv.addEventListener('click', foo1);
myDiv.addEventListener('click', foo2);

＆＃13;

<div id="my-div" style="width:100px;height:100px;border:solid 1px"></div>

＆＃13;

Answer 4

addEventListener是执行此操作的正确方法，但是您可能需要通过猴子修补来对DOM元素属性事件侦听器执行此操作。

请原谅我部分抢夺@ AlexKudryashev的片段。

var myDiv       = document.getElementById('my-div'),
    myBut       = document.getElementById('my-button'),
    f1          = e => console.log(`clicked "${e.currentTarget.id}" and f1 invoked`);
    f2          = e => console.log(`clicked "${e.currentTarget.id}" and f2 invoked`);
    monkeyPatch = (f1,f2) => e => (f1(e),f2(e));

myDiv.onclick = f1;
myBut.onclick = function(e){
                  console.log(`f2 monkey patched to f1. Click My Div to see the effect`);
                  myDiv.onclick = monkeyPatch(myDiv.onclick, f2);
                }

<div id="my-div" style="width:100px;height:100px;border:solid 1px">My Div</div>
<button id="my-button">Monkey Patch f2</button>

将多个事件处理程序分配给单个事件

4 个答案: