Calling a function before any click event handler

Question

Hi I want to call a function every time before any click event handler method. I know, inside the click handler method I can call my function first, but this quite cumbersome as I have to do this at so many place as well as I have to keep in mind the same for any future click events.

Answer 1

You can set a capture event handler on the document object (or any common parent) and it will be called first before the event handler on the individual object. capture is the third argument to .addEventListener() which is normally optional and defaults to false, but if you pass true on a parent, then the event handler will be called first.

Here's an example:

document.addEventListener("click", function() {
   log("document capture click");
}, true);

document.getElementById("target").addEventListener("click", function() {
   log("element click");
}, false);

function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}

<div id="target">Some text to click on</div>

Here's a related question that helps to understand the capture flag: Unable to understand useCapture attribute in addEventListener