jQuery events: prepend a callback handler to already existing ones

Question

On a web page are elements with click and/or keypress handlers. If I add a new one it would be executed after them. I need a way to add a new callback which is prepended to the event handler list, so that it is executed beforehand. How is that possible with jQuery?

Update

Why can't I just use jQuery's unbind method? I am injecting my jQuery code to any web page, so that i don't know if any and which JavaScript framework is used. I need a universal way to detect event handlers and prepend mine. (Before you ask, I'm building a "recorder" application that tracks the users actions to store them and to execute them later on.)

Update 2

I only use Firefox, no need for IE compatibility. I have to wait for the page to load completely, and after that my jQuery script will be invoked.

Bacciferous

is it a script you have control over? in other words, can you unbind then rebind everything? – Shabby

callback is always executed after an event happens. if you want your old handler to do something extra, why not just modify the code in your existing handler? – Knife

As I understand it there is no way to guarantee what order multiple handlers bound with .addEventListener() will be called in and no way to list what handlers have been bound. A single library (like jQuery) can work around this as long as you only bind events through the library, but I'm not sure how you could handle events bound through multiple libraries and/or plain JS. Unless you can override .addEventListener() before any other code on the page is run so that other code binding events goes through your proxy? (Which still wouldn't help you for older IE...) – Mesdames

No need for IE compatibility, it's only running in FF. I cannot run any code in the beginning, i have to wait for the page to load complete, and after that my jQuery script will be loaded. – Bacciferous

possible duplicate of Insert a JQuery click handler that executes before the ones already registered – Hat

Answer 1

I stabled on this need as well and I came up with a workaround the is based on how events bubble on the DOM. So the main idea is to actually do the following:

1. Insert an extra element as direct child of the element you want to append the event to.

2. In the case of click event make sure it takes the full width and height of its parent :

   • If the parent has padding/border add negative margin to the child so that it takes the full area of the parent

3. Add the prepended click event to the created child

The click event gets prepended since the click on the child will get executed first and the event bubbles up to the parent. Then the parent's existing events will be executed afterwards, creating the desired effect.

Example:

      
      const $someButton=$('.btn')
      $someButton.click(()=> alert('default event'))
      /**
      * 1. Insert an extra element 
      * as direct child of the element 
      * you want to append the event to
      **/
      $someButton.wrapInner(
        '<div class="btn__first_event"></div>'
      )
      /**
      * 3. Add the prepended click event to 
      * the created child
      **/
      $someButton.find('.btn__first_event').click(()=>alert('Prepended Event'))

.btn{
   cursor:pointer;
   background-color: yellow;
   padding:10px;
   border-radius:3px;
   border: 1px solid;
   display: inline-block;
}
/*
 2. In the case of click event 
make sure it takes 
the full width and 
height of its parent
-------------------- 
note: some css is needed for 
offsetting padding / border
*/
.btn__first_event{
   margin: -10px;
   padding: 1px;
   border-radius:3px;
   background-color: rgba(0, 0, 255, 0.4)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">Click me<div>

Ballard

Answer 2

I think this might work if you use event capturing (the handlers of ancestors are called before the event reaches the element) instead of bubbling (child --> ancestors). This is a way to intercept an event before the target element is reached.

Most event handlers use event bubbling. According to w3c an event first gets captured, and then from the target it bubbles up again. So if you would bind an event to the document using capturing it would be executed first for every element on the page.

http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow-capture

You would bind the handler with: (the third argument is whether you want to use event capturing)

document.body.addEventListener('click',handler,true)

This would be executed for every click in the element, before the event handler of the clicked element is executed. I am not sure though about support in browsers.

Facelift

This seems to work, thank you. Although i believe that it wont cover all possible cases. – Bacciferous