Zastosuj EventListener:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Wtedy możesz do jednego elementu przypiąć wiele zdarzeń, np.:
var div = document.getElementById('moj-div'); div.addEventListener('click', function(){ /* co ma sie wykonac po zajsciu zdarzenia */}); // reaguje na klikniecie myszki div.addEventListener('mouseover', function(){ /* co ma sie wykonac po zajsciu zdarzenia */}); // reaguje na ruch myszą div.addEventListener('keydown', function(){ /* co ma sie wykonac po zajsciu zdarzenia */}); // reaguje na wcisniecie klawisza klawiatury
Możesz je również odpinać poprzez div.removeEventListener(); Wtedy musisz podać dokładnie te same parametry, co w momencie podłączania EventListenera: czyli zarówno typ zdarzenia, jak i funkcje. Dlatego, jeśli wiesz że będziesz usuwał EventListener, nie twórz anonimowej funkcji, tylko przekaż sobie referencje do funkcji (wpisz po prostu nazwę funkcji), a samą funkcje utwórz sobie oddzielnie.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
[edit]
Pytanie było o przypięcie kilka elementów, do jednego zdarzenia.. więc to też się da.
var div = document.getElementById('moj-div'), innyDiv = document.getElementById('inny-div'); div.addEventListener('click', function(){ /* co ma sie wykonac po zajsciu zdarzenia */}); // reaguje na klikniecie myszki innyDiv.addEventListener('click', function(){ /* co ma sie wykonac po zajsciu zdarzenia */}); // reaguje na kliknięcie myszki
Najpierw łapiesz sobie elementy HTML, a potem podpinasz EventListenery o określonym typie zdarzenia.