How to add one click event handler for two different buttons without using jQuery?

Question

When a user opens a modal, there are two ways of closing it, one by pressing the 'x' in the top right corner of the box, or by pressing the cancel button. The two buttons are both in the same class name modal-hide but also have id's of modal-close and modal-cancel.

var cancel = document.getElementById('modal-cancel');
var close = document.getElementById('modal-close');

cancel.onclick = function () {
    //close window
}
close.onlick = function () {
    //close window
}

What is the best way to implement an event handler so that I don't have to write two different onclick functions that do the same thing?

I do not want to use jQuery for this at all!

Possible duplicate of [Bind a function to Twitter Bootstrap Modal Close](https://stackoverflow.com/questions/8363802/bind-a-function-to-twitter-bootstrap-modal-close) — ollaw, Oct 20 '17 at 23:47
I wouldn't say it is the "best" way, but the simplest small change to the code shown is perhaps `cancel.onclick = close.onclick = function() { .. }`. — nnnnnn, Oct 20 '17 at 23:48

score 2 · Accepted Answer · answered Oct 20 '17 at 23:52

First of all, don't use event properties! Use addEventListener (MDN) as a modern standard instead. Then you should define a separate handler function (let's say onClick) to bind it with your elements:

var cancelElt = document.getElementById('modal-cancel');
var closeElt = document.getElementById('modal-close');
var onClick = function () {
  alert('Hello!');
};

cancelElt.addEventListener('click', onClick);
closeElt.addEventListener('click', onClick);

score 1 · Answer 2 · answered Oct 20 '17 at 23:52

1

Simply use named instead of anonymous functions. I use addEventListener below instead of onclick.

var cancel = document.getElementById('modal-cancel');
var close = document.getElementById('modal-close');

var clickFunction = function() {
  // close modal
}

cancel.addEventListener('click', clickFunction, false);
close.addEventListener('click', clickFunction, false);

answered Oct 20 '17 at 23:52

davidchappy

281
1
8

Thank you! This does just what I wanted! Only question I have is what does the false parameter do in the addEventListener command? – C. Ols Oct 20 '17 at 23:59
As [this doc](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) describes, it can help you avoid warning messages about Passive mode. Not necessary, but good habit. – davidchappy Oct 21 '17 at 00:01
@C.Ols, the false/true statement makes the event use capture or not. Basically, set to true, all events that have capture set to true in any ancestor element will execute first. False is the opposite. – Mouser Oct 21 '17 at 00:04
1

David - that argument has nothing to do with the passive option, as described by the same page you linked to. – nnnnnn Oct 21 '17 at 00:04
Correct and thanks for the correction @nnnnnn. It is a good habit though: "useCapture has not always been optional. Ideally, you should include it for the widest possible browser compatibility." – davidchappy Oct 21 '17 at 01:27

score 0 · Answer 3 · answered Oct 20 '17 at 23:58

0

A solution that basically is one line.

Array.prototype.forEach.call(document.querySelectorAll("#modal-cancel, #modal-close"), function(element) {
    element.addEventListener("click", function() {
      //close window
    }, false);
});

answered Oct 20 '17 at 23:58

Mouser

13,132
3
28
54

How to add one click event handler for two different buttons without using jQuery?

3 Answers3