ansaurus

Question

Binding event handlers to specific elements, using bubbling (JavaScript/jQuery)

Answer 1

A:

You can add an event listeners to document.body. The handler function can inspect the event to figure out which element was originally targeted. If you were using the Prototype library, you would use this:

http://prototypejs.org/api/event/element

I know you're using jQuery, but I'm sure it has equivalent functionality; I'm just not as familiar with it.

allyourcode 2010-03-07 23:05:03

Answer 2

A:

This is going to be fairly problematic, because you can't directly style the text nodes in your document. That means that if you've got something like this:

<div>
  Hello world how are you
  <ul>
    <li>First of all, it is a lovely day outside</li>
    <li>Second, it's important that you
      <a href='http://somewhere.else'&gt;click here</a>
    </li>
  </ul>
</div>

Well when you try to restyle the text block at the head of that <div>, you'll need to do it in such a way that the rest of the <div> doesn't also get a new background color. (At least, I think that's what you're asking for.)

There's a "highlight" plugin for jQuery that you might look at as a guide to how you can replace simple text nodes with <span> tags that have some given class. The plugin is intended to let you style words/phrases that you search for, but it's not terribly complicated and you might be able to adapt it. The plugin is here: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Pointy 2010-03-07 23:09:00

Thanks, Pointy - I think that your example would actually produce the desired effect, though. If a user hovers over "Hello world how are you" then I'd like to highlight the entire <div> that encompasses it, including all descendant nodes. Reason being, I want to generate a CSS selector that corresponds the highlighted text. Since there's no CSS selector to match only "Hello world how are you" without also matching the other descendants of the <div>, this would still lead to the desired behavior.

Bungle 2010-03-08 00:21:45

Ah, well if that's what you want to do, I think it's pretty easy - I'll update my answer.

Pointy 2010-03-08 01:08:44

ansaurus

tags:

views:

answers:

Binding event handlers to specific elements, using bubbling (JavaScript/jQuery)

related questions