Binding a js event according to mouse position : performance killer or not?

I've done this : http://jsfiddle.net/CS273/4/

On this fiddle, when the mouse reaches the right area of the text input, it 开发者_开发技巧changes the cursor (pointer) and creates a click event listener. When the mouse gets out of the right area, this same event listener is destroyed.

I would call that "on the fly" event listener binding, perhaps it already has a name.

Is it a good thing to do that or not ?

All things being equal, you'll probably never notice a performance hit, but this is a somewhat odd way to do what you want.

I'd suggest re-working your HTML so that the 'x' isn't part of the input and you can just attach a normal event handler.

example: http://jsfiddle.net/cwolves/CS273/6/

See this update to your fiddle: http://jsfiddle.net/maniator/CS273/5/

I made a floating div that handles the click for you.

Here it is with some color so you see it: http://jsfiddle.net/maniator/CS273/7/

The only js you need:

$(".hover").click( function(e) {
    $('.filterNameInput').val('').blur();
});

You can add cursor: pointer; to the css of .hover to have it look the same as your current version.