Pulling .live() functionality out of jQuery

I am writing a Firefox Add-On that currently is depending on jQuery for the following things:

• Selectors
• Animations
• A special .live("focus") hail-mary event-catching manoeuvre that happens to work with jQuery 1.4.2 (but not 1.4.4)

jQuery isn't well suited for functioning inside XUL, and it's a miracle we've gotten this far with it. We're trying to remove the jQuery requirements, the first two are easy (animations are simple, and we can use .querySelector() instead of jQuery), but the .live has proven impossible to do on our own. I've tried reading the source code, but I haven't been able to piece it apart.

What is the jQuery .live function doing? There's clearly a lot more going on than document.addEventListener("focus"/"focusin",fu开发者_如何转开发nction_to_pick_apart_events). What else is going on here?

As others have said, using JQuery in a Firefox addon may not be as hopeless as it sounds. But to answer your question directly: JQuery is open-source, so you can always look for yourself. I'm not familiar with the JQuery source code myself, but I think https://github.com/jquery/jquery/blob/master/src/event.js#L552 might be a good place to start...

One approach might be to capture focus events at the window level, then loop through looking for elements of interest that might not already have a focus event listener and add one. An over-simplified example:

<script>
function handleFocus(event) {
  event.target.value = "";
}
function captureFocus() {
  document.getElementById("target").onfocus = handleFocus;
}
window.onload = function() {
  addEventListener("focus", captureFocus, true);
}
</script>
<input id="target" value="Enter the value">

As you can see there is no requirement for the input to exist in the document when the script executes, it will attach the event listener on the first focus event instead.

Are you running JQuery in noConflict mode? I have some colleagues that swear by JQuery in Firefox Add-ons. I've seen their work, both the result and the code, and it's fantastic. I suggest noConflict mode, and use jQuery to refer to JQuery instead of the $ symbol.

.live is different than .bind. In fact, live is pretty amazing. It not only binds event handlers to elements matching a specific CSS selector, but will also bind the handler to any new elements that are imported onto the page that match that selector. There clearly must be some kind of monitoring going on under the hood to continue to bind events to new elements, EDIT: such as the event bubbling delegation described in the comments below.

Considering XUL has a different structure than the HTML DOM, this could explain why you have trouble with .live.

A possible workaround could be to use .bind and then add handlers to any new elements yourself, if that is indeed your goal of using .live. Essentially, if you add new elements on the page that match the selector, you'll need to bind any events to those elements that would have been bound had those elements existed on window load.