We Keep Coding

YUI3: How would I trigger an event?

Suppose I have a click event on a link/button/etc.
var myButton = Y.one('.button');
myButton.on('click', function() {
// code
});
There is something else happening on the page that I want to trigger a click event on this button. How would I do this?
I saw YUI3's fire() method, but it looked like that was designed for custom events. If I am supposed to use fire(), then will myButton.fire('click') work?
(I'm looking for the equivalent of jQuery's .trigger() method, which works on DOM events or custom events.)

If you are looking for equivalent of trigger in yui3 you can try using the 'simulate'
Y.one('button selector').simulate('click');
For the above statement to work you will need to add "node-event-simulate" roll up in the use method.

Do you really need to trigger the click event on the button? Take the HTML below
<button id="myButton">Click Me</button>
<br>
Click Me
You can make use of the custom events to put the real logic somewhere central.
YUI().use("node","event",function(Y){
Y.one("#myButton").on("click",function(){Y.fire("custom:doThing")});
Y.all("a").on("click",function(){Y.fire("custom:doThing")});
Y.on("custom:doThing",function(){console.log("Do my thing, regardless of event source")})
});
Fiddle: http://jsfiddle.net/WZZmR/

Javascript onFocus . then onClick inside function

I'm trying to make it so when an element gets focus it calls a function which then will take care of all other events - here is my code for now.
<span id="checkbox" class="checkbox" onFocus="cbHover(checkbox)"></span>
<script type="text/javascript">
function cbHover(id) {
if(document.getElementById(id).onClick) {
document.getElementById(id).style.backgroundPositionY = '-63px';
}
}
</script>
Obviously this isn't working :( So is there a way to keep the function running to listen for other events?
Thanks!

When the object is clicked, it is already focused. You can either skip the onFocus and replace it with onClick, or the other way around and remove if(document.getElementById(id).onClick) from the code, because you don't need it.

You are able to use two events: onFocus and onLostFocus. In onFocus event handler you are able to add onClick event to element:
document.getElementById(id).addEventListener('click',function_name,true);
In onLostFocus event handler you are able to remove event
document.getElementById(id).removeEventListener('click',function_name,true)

this is a bad idea even if you did get it to work you run the risk of applying multiple clicks on the same element. your best bet it to just apply the click event on dom ready I typically use jQuery
so if I where doing this in jquery i would do it like this
$(document).ready(function(){
$('.classname').click(function(){
// what to do onclick
});
});

The reason it isnt working is the parameter that is passed, should be enclosed in quotes.
It should be
onFocus="cbHover('checkbox')"
otherwise, javascript treats checkbox as a variable and tries to pass the value of the variable which is null.

Jquery - Toggle mousedown event without destroying it in the dom?

So on Friday I asked this question and it wasn't well written, let me explain this in better detail:
So this might sound remedial, but I have this container that I include a mousedown event and all I want to do is toggle it without destroying the properties of it.
If it do :
$("#div").unbind("mousedown") // This will just destroy the event.
I was thinking I could move the event to a dom element that isn't being used? And then just switch it back when I'm done...
So this is whats happening : I have a plugin lets just call it Vinny for now
$("#div").vinny(settings);
vinny has a mousedown event that I want to enable/disable via a trigger.
I was thinking I would have a $fn.disableMouseDown function that could disable it, but was curious if theirs a way to unbind a mouseDown on the dom but not destroy it?
If you know of a quick way of doing it help me out! Thanks, Vinny

Put your command inside a function, so you can bind/unbind with one line only, i.e:
function some() {
// some commands
}
$("#div").bind("mousedown", some);
$("#div").unbind("mousedown");

One approach is to just use a named function, bind it when it's needed and unbind it when it's not:
function foo () {
// do something on mousedown
}
// When needed:
$("#div").bind("mousedown", foo);
// When not needed:
$("#div").unbind("mousedown", foo);

I would just stick an if(toggle) statement inside the event. Any reason you can't do that? (only thing i can think of is you wouldn't want to have the event being continually fired over and over, which makes sense - is that the case?)

here is a working example http://jsfiddle.net/samccone/ENzyk/
I think this is a simple and elegant solution

Hey guys thanks for all the ideas, but I kinda did a hacky way of approaching this.
I explainz:
So this plugin on the mousedown is binded in the plugin.init() and in their i defined a local function checks disableValue and in their I just check the dom for a or do a bool return and run that against the other function that was already present in exiting the mousedown event.
Make sense? I hope so too
Thanks,

Intercept javascript event

Here's what I'm trying to do :
I have a page with some links. Most links have a function attached to them on the onclick event.
Now, I want to set a css class to some links and then whenever one of the links is clicked I want to execute a certain function - after it returns , I want the link to execute the onclick functions that were attached to it.
Is there a way to do what I want ? I'm using jQuery if it makes a difference.
Here's an attempt at an example :
$("#link").click(function1);
$("#link").click(function2);
$("#link").click(function(){
firstFunctionToBeCalled(function (){
// ok, now execute function1 and function2
});
}); // somehow this needs to be the first one that is called
function firstFunctionToBeCalled(callback){
// here some user input is expected so function1 and function2 must not get called
callback();
}
All this is because I'm asked to put some confirmation boxes (using boxy) for a lot of buttons and I really don't want to be going through every button.

If I understand you correctly, is this wat you wanted to do..
var originalEvent = page.onclick; //your actual onclick method
page.onclick = handleinLocal; //overrides this with your locaMethod
function handleinLocal()
{ ...your code...
originalEvent ();
// invoke original handler
}

I would use jQuery's unbind to remove any existing events, then bind a function that will orchestrate the events I want in the order I want them.
Both bind and unbind are in the jQuery docs on jquery.com and work like this...
$(".myClass").unbind("click"); // removes all clicks - you can also pass a specific function to unbind
$(".myClass").click(function() {
myFunctionA();
myFunctionB($(this).html()); // example of obtaining something related to the referrer
});

An ugly hack will be to use the mousedown or mouseup events. These will be called before the click event.

If you can add your event handler before the rest of handlers, you could try to use jQuery's stopImmediatePropagation

Event handling jQuery unclick() and unbind() events?

I want to attach a click event to a button element and then later remove it, but I can't get unclick() or unbind() event(s) to work as expected. In the code below, the button is tan colour and the click event works.
window.onload = init;
function init() {
$("#startButton").css('background-color', 'beige').click(process_click);
$("#startButton").css('background-color', 'tan').unclick();
}
How can I remove events from my elements?

There's no such thing as unclick(). Where did you get that from?
You can remove individual event handlers from an element by calling unbind:
$("#startButton").unbind("click", process_click);
If you want to remove all handlers, or you used an anonymous function as a handler, you can omit the second argument to unbind():
$("#startButton").unbind("click");

Or you could have a situation where you want to unbind the click function just after you use it, like I had to:
$('#selector').click(function(event){
alert(1);
$(this).unbind(event);
});

unbind is your friend.
$("#startButton").unbind('click')

Are you sure you want to unbind it? What if later on you want to bind it again, and again, and again? I don't like dynamic event-handling bind/unbind, since they tend to get out of hand, when called from different points of your code.
You may want to consider alternate options:
change the button "disabled" property
implement your logic inside "process_click" function
Just my 2 cents, not an universal solution.