javascript - jQuery events: prepend a callback handler to already existing ones - Stack Overflow

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 patibility. I have to wait for the page to load pletely, and after that my jQuery script will be invoked.

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 patibility. I have to wait for the page to load pletely, and after that my jQuery script will be invoked.

• javascript
• jquery
• callback
• click
• jquery-events

Share Improve this question Follow edited Jul 25, 2019 at 12:47 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 29, 2012 at 10:05 AlpAlp 29.8k2929 gold badges123123 silver badges202202 bronze badges 5

• is it a script you have control over? in other words, can you unbind then rebind everything? – kinakuta Commented Jan 29, 2012 at 10:09
• 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? – Benny Tjia Commented Jan 29, 2012 at 10:10
• 1 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...) – nnnnnn Commented Jan 29, 2012 at 11:10
• No need for IE patibility, it's only running in FF. I cannot run any code in the beginning, i have to wait for the page to load plete, and after that my jQuery script will be loaded. – Alp Commented Jan 29, 2012 at 11:42
• possible duplicate of Insert a JQuery click handler that executes before the ones already registered – Piotr Dobrogost Commented Apr 14, 2014 at 14:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/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.

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">Click me<div>