複数のイベントハンドラを1つのイベントに割り当てる

Question

すでにハンドラ機能を持つイベントにJavaScript関数を割り当てたいとします。新しい関数は、既存の関数を変更または削除しないでください。一例として、

：

私はすでにdocument.onmousemoveに割り当てられているexFunction()と呼ばれる機能を持っています。同じイベントに割り当てる別の関数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を簡単に割り当てることができます。
関数の名前は実行するコードのアドレスであり、このアドレスは不変であることに注意してください。スニペットは、動作するものと動作しないものを示します。

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

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

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>