JQuery/Javascript process question

I've inherited someone else's project and am building a work flow diagram for it. Without getting into too many details the person who left was the only person in the web department with advanced programming skills (most people there do production work and some HTML/CSS stuff). The project I inherited was developed in CodeIgniter and leans heavily on JQuery, AJAX and JSON. The flow is a bit confusing hence my outlining it. (I'm getting to the question, bear with me)

Anyway, the manager of this department, let's refer to him as The Tool, won't allow his people to learn any of 开发者_开发问答this stuff. He asked me the other day how it was coming and I said fine except I can't find where one variable is being set, the original developer is using jquery to call some form value to set a path to files (he using #id.val()) but I can't find #id anywhere in the code. The manager replies, eh, I thought you were the PHP guru. As I said, we shall refer to him as The Tool.

Anyway, to stick it to him somewhat I've decided to share these flow pages with people in his group, make them very descriptive and hopefully educational. I'm explaining how when a change is made from a select menu jquery/javascript recognizes that change and fires off related code in JS.

Then it dawned on me that I really didn't know how JS/JQ knew the change had been made. I know the code ($("#id").change()...I have an AppleScript background and in that language there's an idle command, you basically can have a script sit in the background observing and waiting for X to happen (say the user launches Photoshop) and when that event happens the rest of the code is run. Does JS do something similar?

This code:

$("#id").change()

tells jQuery (the "$") to find the element whose "id" value is (in this case) "id", and then to trigger a "change" event on the element. That will cause event handlers registered to look for such events on that element to be run. That's the basis of just about everything you do with JavaScript in a browser: responses to events.

Somewhere, there's probably one of these:

$("#id").change(function() { ... })

$("#id").live('change', function() { ... })

$("#id").bind('change', function() { ... })

There are many ways for the element to have been identified for setting up the event handlers, however, so it may be tricky to find.

In newer versions of chrome you can inspect a html element, and this will also show 'classic' events that are bound to it.

Increasingly good developers are moving to event delegates such as: http://developer.yahoo.com/yui/3/event/#delegate

Which will likely not show up in Chrome, but should be readable from the code.