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.

Answer 1

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.

Answer 2

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>