I like the way jQuery wraps events when you use its "bind" method. However it's awkward to set up the bindings. Is there any way to combine the ease of html (e.g. onKeyPress="foo(event)" ) with jQuery's browser-independent event-handling goodness?
3 Answers
You mean like this?
function foo(event) {
alert(event.target);
}
$('.someSelector').keypress(foo);
Whether in HTML or javascript way you need to create a function foo, so maybe this is closer to what you were looking for.
I'm not sure what exactly you feel is awkward about jQuery's handler binding.
5 Comments
JoelFan
What is "someSelector" if the HTML element doesn't have a class, or an id? Isn't it more awkward to have to declare an element an HTML and then go back and somehow locate it in the DOM and attach an event handler in a different place in the file than to just declare the element and its event handler at the same time?
user113716
@JoelFan - jQuery is all about selecting from the DOM, then performing manipulations. If there's no consistent identifier for the element(s), and you don't wish to add one for the purpose of selection, then I guess I'd have to ask what it is about jQuery's handler binding that you do like, and is it enough to convince you to plan your markup to accommodate DOM selection. Or am I missing your point?
JoelFan
I like jQuery's browser-independent "wrapper" that it gives you for event handlers... api.jquery.com/category/events/event-object... and I wouldn't agree that jQuery is all about selecting from the DOM... it's about browser-independent, simpler client-side scripting... finally... I'm not "planning" my markup... I'm fixing up existing markup that was developed without jQuery
user113716
@Joel, since you're fixing existing markup, then if you wish to have jQuery manage your handlers, you'll need to fix the markup in such a way that jQuery can select the elements you want. jQuery is 100% javascript, and as such, it can only do what javascript (and the DOM API) can do. With regard to "all about selecting", I didn't mean that too literally as though it is the only thing it does, but it certainly is a driving force behind the library. jQuery was apparently going to be called "jSelect" at first.
user113716
...if there are some limitations to the repairs you're able to do on the existing markup, it would be possible (though a little inefficient) to perform DOM selections based on
on[event] attributes, then use the value of the attribute as needed.You probably don't want to do that.
You may want to read up on event delegation in JavaScript, which those jquery binding methods handle neatly for you.
Here's the highlights:
Event delegation has several benefits to the performance of a web application:
Fewer functions to manage. Takes up less memory. Fewer ties between your code and the DOM. Don’t need to worry about removing event handlers when changing the DOM via innerHTML.
You're better off using jQuery's binding helpers like $whatever.click(fn) etc.
Actually here is another question on SO that references the same article I did that may also help.
Comments
A good idea is to actually separate the two, to have your HTML clean and the js in a separate location. You can try shortcuts like $('a').click(...) instead of $('a').bind('click'...), but that's about it. Personally I like having the bindings separate from the markup.
1 Comment
JoelFan
Your advice assumes that I want to bind every single 'a' tag to exactly the same handler
on[event]attributes. So you're really looking at one or the other.