I was going through the history of dropdown.js in bootstrap and came across the following change History file on git, here:
$this.focus() // focus() being changed to trigger('focus');
$this.trigger('focus')
Now, the guy here has left a comment about the change saying:
Makes life for people with custom jQuery builds excluding event
aliases much easier.
I don't quite understand what's the difference here between using focus() or trigger('focus'), as for me both have the same effect; why has the author chosen such a change?
https://github.com/jquery/jquery#modules.
If you are making a custom jQuery build and exclude event/alias module - you won't have shortcuts to events (e.g. .click(), .focus(), .ready(), etc).
So you'll have to use .on('eventName', handler) for event binding and consequently .trigger('eventName') to trigger jQuery event.
People with custom jQuery builds could create or modify their own focus() functions intended to do whatever they want. Imagine if you create your own focus() which allows lot of parameters and chains multiple callback; it would be a mess when you combine its usage with the jQuery focus() basic function.
When you use a trigger it's qute obvious you're going to trigger an action; in this case, to focus an element.
Beside of that, using the trigger() functions makes the code a little easier to understand.
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery: more than one handler for same event
I am using a jQuery slider plugin that creates two buttons. These buttons have click events attached to them by the plugin as they are used to control the slider. I have created my own mouseover\mouseout events independent of the plugin (inline with the webpage) to handle animations. I would like to create one for click as well (so that the button changes color). Will me creating another click event handler override or break what the plugin does? Is it bad practice and is there a better way?
Having two events is no problem. You can assign as many events to an object as you like.
This is logical as you most likely want different functions to fire depending on the event that's triggered. And 99% of every jQuery-plugin will have no problem dealing with objects with multiple events. Try it and ask a question if you have any problems.
The only thing that is not good is inline js ;)
It would NOT break any handler that was bound already. The way jQuery bind is using event registration model and so it support multiple event handlers.
This is one of the advantages in using addEventListeners/attachEvent over traditional methods.
More reading: https://stackoverflow.com/a/12627478/297641
Not really, though if you can handle all functionality in one handler, then why wouldn't you?
You should have no problem. Just add your own event handler using jQuery's API and you'll be set. From the jQuery Docs on .on():
As of jQuery 1.4, the same event handler can be bound to an element multiple times.
$('#myButton').on('click', myHandler)
In some cases I would say it is bad practice. Creating multiple event handlers on a single element is almost always avoidable. If you are comfortable enough, you could always open the source of the plugin(if its not a minified version) and modify the event handler to include your modifications.
If you are uncomfortable doing that, then I would say continue what you are doing. Just know that there are better alternatives.
This assumes that you are adding say another click event binding when the plugin already has one.
-Mike
I'm using this plugin called "Chosen" to turn my plain old select elements into a find as you type deal.
The problem is my existing page has code that fires when the select element comes into focus, and it seems to no longer fire.
Here's a place you can play around with some sample chosen code if you have any ideas you might want to test. (It's pretty similar to my own code so you can also see how it's implemented.)
that plugin does not seem to have callbacks, that is how i'd do that, instead of .focus() you pass what you need to do on a plugin callback that emulates that event, there is no event "focus" for the markup that the plugin generates.
Buttons are slow on mobiles (at least 300ms delay in most browsers due to drag detection among other things). Google wrote some javascript to fix this:
http://code.google.com/mobile/articles/fast_buttons.html
The Mobile HTML5 Boilerplate people integrated this into their package:
https://github.com/h5bp/mobile-boilerplate/blob/master/js/mylibs/helper.js#L86
I want to figure out how I can easily use this with backbone. Something like:
events: {
"fastbutton button.save": "save"
}
Where fastbutton replaces click or mousedown with the fast button code. I expect that I will need to rewrite the MPB.fastbutton code a bit. Has anybody done this?
Instead of creating 'fastbuttons' everywhere, it's probably saner to use a library like FastClick that will transparently convert touches to click events on the touched element and get rid of that 300ms delay.
It's as easy as new FastClick(document.body) and you're ready to go.
The advantage of that approach is that if or when the behaviour of touch events changes on mobile devices so that there's no delay on elements with a click event registered, you can just change one line of code to drop the library instead of changing all your code to convert 'fastbuttons' to regular buttons. Maintainability is always good.
I'm pretty sure, this won't work the way you'd like it to. Instead of having an additional event, like say "fastclick", you have to define an element as beeing a fastButton. You actually have to create an instance of fastbutton on which you pass the element and the code like this:
new MBP.fastButton($("button.save"), function() { this.save(); }.bind(this));
In case of backbone, you can easily do this in the initialize() function instead of the events object.
// sorry, just read that you are not really looking for this :)
I have a facebook connect button on this site here is the code
<fb:login-button onlogin="javascript:jfbc.login.login_button_click();"
perms="email,publish_stream,user_about_me,user_hometown,user_location,user_birthday,user_religion_politics,user_interests,user_activities,user_website"
size="medium" v="2"><a class="fb_button fb_button_medium">
<span class="fb_button_text"\>Login With Facebook</span></a></fb:login-button>
and i want to trigger this button with a javascript call and doing research i found this jquery that seems that it would do the trick (havent tested though) and i was wondering if there is an equivelent javascript or mootool because jquery is not installed. I can install it if i cant find a solution. Or if anyone has another idea on how to trigger this facebook button
$("fb\:login-button").trigger("click");
There are two ways to "trigger" a listener:
call it directly (e.g. element.onclick())
dispatch an event into the DOM that the listener will respond to
The trouble with the first method is that it doesn't replicate a bubbling event so the listener may not work as intended (e.g. there is no associated event object or bubbling, the listener's this keyword may not be correctly set).
The trouble with the second is that some browsers will not allow programatically dispatched events to do certain things (click on links for example). Also, in some browsers you have to use the W3C dispatchEvent and in others the Microsoft fireEvent.
So unless the listener has been designed specifically to work with one method or the other and is called appropriately, your chances of triggering the listener successfully are quite low.
PS. Some libraries provide their own event system, with custom events and bubbling of otherwise non-bubbling events, but in that case you have to set and trigger the listener using that library, otherwise it will probably not respond to either of the above methods.
You should be able to just invoke the same code that is invoked inline:
jfbc.login.login_button_click();
I suppose it would be something like
document.getElementsByTagName("fb\:login-button")[0].click();
I'm sure that would work very well with a "normal" DOM element that handles the click event; however, I'm not entirely sure it will work in all browsers with the fb:login-button element shimmed into HTML. You'll have to let me know.
Looks like you should be able to do:
document.body.getElementsByTagName("fb\:login-button")[0].click();
It looks like you want a namespaced element selector, so you should use:
document.getElementsByTagNameNS('fb', 'login-button')[0].click();
The : is the namespace separator.
I ran into this tonight, absolutely positioned a new button image over the iframe, and was planning on using pointer-events:none to pass through and click the iframe, but I was looking for a cross-browser solution, here you go.
jQuery('.button_fb_connect').live('click', function(){ FB.login() })
Your simply running the js function FB.login() after clicking your new element, obviously you can use whatever event you want.
Thats in jQuery of course, but thats the function you want, not just a simple click event trigger.
I have a custom built ajax [div] based dynamic dropdown.
I have an [input] box which; onkeyup, runs an Ajax search which returns results in divs and are drawn back in using innerHTML. These divs all have highlights onmouseover so, a typical successful search yields the following structure (pardon the semi-code):
[input]
[div id=results] //this gets overwritten contantly by my AJAX function
[div id=result1 onmouseover=highlight onclick=input.value=result1]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[/div]
It works.
However, I'm missing the important functions behind regular HTML elements. I can't keyboard down or up between "options".
I know javascript handles keyboard events but; I haven't been able to find a good guide. (Of course, the follow-up question will end up being: can I use <ENTER> to trigger that onclick event?)
What you need to do is attach event listeners to the div with id="results". You can do this by adding onkeyup, onkeydown, etc. attributes to the div when you create it or you can attach these using JavaScript.
My recommendation would be that you use an AJAX library like YUI, jQuery, Prototype, etc. for two reasons:
It sounds like you are trying to create an Auto Complete control which is something most AJAX libaries should provide. If you can use an existing component you'll save yourself a lot of time.
Even if you don't want to use the control provided by a library, all libraries provide event libraries that help to hide the differences between the event APIs provided by different browsers.
Forget addEvent, use Yahoo!’s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.
If that article goes over your head have a look at this documentation first and then re-read the original article (I found the article made much more sense after I'd used the event library).
A couple of other things:
Using JavaScript gives you much more control than writing onkeyup etc. attributes into your HTML. Unless you want to do something really simple I would use JavaScript.
If you write your own code to handle keyboard events a good key code reference is really handy.
Off the top of my head, I would think that you'd need to maintain some form of a data structure in the JavaScript that reflects the items in the current dropdown list. You'd also need a reference to the currently active/selected item.
Each time keyup or keydown is fired, update the reference to the active/selected item in the data structure. To provide highlighting information on the UI, add or remove a class name that is styled via CSS based on if the item is active/selected or not.
Also, this isn't a biggy, but innerHTML is not really standard (look into createTextNode(), createElement(), and appendChild() for standard ways of creating data). You may also want to see about attaching event handlers in the JavaScript rather than doing so in an HTML attribute.