Binding Events in Zepto
I'm looking to convert the following plugin jquery.hotkeys.js plugin from jQuery to be used with Zepto.
Righ开发者_开发问答t now I'm using coffeescript but I'll include the Javascript translation as well. Zepto has a binding and events API for keyup
, keydown
, and the keypress
events (see here), but binding a new custom event (in this case, keyHandler
) to accept those events is a bit tricky that I don't quite understand.
Here's the code that I've gone through so far. I'm having a bit of trouble with the last line - in particular, when jquery.hotkeys binds the keyHandler event to the special custom handler of jQuery that I believe Zepto has no alternative of.
Can anyone help me out in getting Zepto to call keyHandler each time I write the following?
$('*').bind('f', function() { console.log("pressed the 'f' key"); });
So, if I even press the f key on a webpage, log to the console that message.
In your code, you do you mean to say the following?
$('*').bind('keypress', 'f', function() {...});
Your gist is no longer available but looking at the original plugin, it depends on jQuery.event.special which is a type of functionality that Zepto doesn't support.
I would recommend extending Zepto with something like Zepto.fn.bindHotkey(events, keys, func). For example:
Zepto.fn.bindHotkey = function(event, keys, func) {
var handler = {data: keys, handler: func};
keyHandler(handler);
this.bind(event, handler.handler);
};
As a note, I wouldn't try binding any event to '*'. This attaches the event to every element on the page. So if you had a text area selected and typed 'f', the text area, its parent, and each parent up to the top, would execute the event handler. Page events can usually be bound to the window or the document object.
精彩评论