We Keep Coding

How do I add a "focus lost" event listener to ZK elements?

I have a Bandbox element which needs an event listener for losing focus/clicking outside.
There's a 'focusout' event in JavaScript but since it's not defined in the ZK 'Events' class I cannot use it as an argument.
Or is there a way to bypass the validation in the 'Events' class so I can use:
myBandbox.addEventListener("focusout", (event) -> {
// do something
});
If not is there an alternative to adding a click listener for the entire page?

After some research I found out that the ON_BLUR-Event does the job:
myBandbox.addEventListener(Events.ON_BLUR, (event) -> {
// do something
});

Event reverse order

I wonder how do I change the order of events.
Because I have to check when I took a focusOut with a click, if the click was inside the parent div, I can not let it happen the focusOut.
The problem, which is called first event focusOut the click event.
Is it possible to reverse the order of events? (Click - focusOut)?
http://jsfiddle.net/eL19p27L/5/
$(document).ready(function(){
$(".clean").click(function(){
$(".alert").html("");
});
$(document).on({
click: function(e){
$(".alert").append("<p>click</p>");
},
focusin: function(e){
$(".alert").append("<p>focusin</p>");
},
focusout: function(e){
$(".alert").append("<p>focusout</p>");
}
})
});
It would be even better. If I could detect what the event might turn out to generate the fucusout. Hence check if it happened within the parent div, if not a focusIn, it leaves not give a focusOut.
ATT

No, the way you have your event handler set up on a common parent, you can't change the order of the events.
But, you can attach your event handlers to the specific objects you want to watch and then you can see events for that object only.
Or, you can look at the target of the event and see which object is which and you will see that the focusOut event is on a different object than the click event.
You can see the source of the event with e.target.
Example of looking at the object that is the source of the event: http://jsfiddle.net/jfriend00/u5tLhes7/

Why do custom events need to be dispatched to an object?

I see that I can dispatch a custom event to an object.
I'm wondering why a custom event needs to be dispatched to an object at all.
I want to trigger an event at a set interval, and after reading documentation on custom events, I still haven't figured out how to trigger them with functions. How is it done?
For example, I want to use setInterval() to trigger my custom event 'nextTime' every 30 seconds.

dispatching events is the same as triggering them, and as they are custom events, they would never be naturally triggered by anything, so you have to trigger them yourself. To trigger an event from an interval just dispatch the event inside the interval.
The reason you need an object is because it's an event handler, if it wasn't attach to an element, you wouldn't really need an event handler, you could just use regular functions instead.
var event = new Event('custom'),
elem = document.getElementById('test');
elem.addEventListener('custom', function (e) {
console.log('custom triggered');
}, false);
setInterval(function() {
elem.dispatchEvent(event);
}, 30000);
FIDDLE

Event managment: Replace click event

I have a button with a click event (from a 3. party library) which submits a form. I like to remove the click event, add my own function and call the original event after a validation.
I thought i just add an event.stopImmediatePropagation(); but that did not work. Maybe because of the order the events where added(?).
Is the another way to manage the event execution?
Or how can I get the old event to do something like this:
originalClickEvent = $('#button').doSomeMagicAndGetTheEvent('click');
$('#button').unbind();
$('#button').bind('click', function (event) {
if (valid()) originalClickEvent();
});

Look here Remove all JavaScript event listeners of an element and its children?
After you remove the event listeners you can attach your custom event.
If I've understood you correctly this is the effect you're searching for: http://jsfiddle.net/ftGHq/

In case the click event is just bound to one function you could overwrite that function:
var oldFunction = theOldFunction;
function myFunction(control) {
oldFunction(control);
}
$('#button').unbind();
$('#button').click(myFunction);

Set the mouseover Attribute of a div using JQuery

I would like to set an attribute for a div. I have done this:
$('#row-img_1').onmouseover = function (){ alert('foo'); };
$('#row-img_2').onmouseout = function (){ alert('foo2'); };
However, the above has not worked, it does not alert when mouse is over or when it moves out.
I have also tried the $('#row-img_1').attr(); and I could not get this to work either.
I am aware that I should be using a more effective event handling system but my divs are dynamically generated. Plus this is a small project. ;)
Thanks all for any help.

You need to bind the event function to the element. Setting the event attributes has no effect, as they are interpreted only when the page is loading. Therefore, you need to connect the event callback in a different manner:
$('#row-img_1').mouseover(function() {
alert('foo');
});
$('#row-img_2').mouseout(function() {
alert('foo2');
});
In jQuery, there are two more events: mouseenter and mouseleave. These are similar, but mouseenter does not fire upon moving the mouse from a child element to the main element, whereas mouseover will fire the event again. The same logic applies to mouseleave vs mouseout.
However, jquery provides a shortcut for this kind of usage: the .hover method.

$('#row-img_1').bind('mouseenter', function(event){
// event handler for mouseenter
});
$('#row-img_1').bind('mouseleave', function(event){
// event handler for mouseleave
});
or use jQuerys hover event which effectivly does the same
$('#row-img_1').hover(function(){
// event handler for mouseenter
}, function(){
// event handler for mouseleave
});

Events are registered as functions passed as attributes, like this:
$('#row-img_1').mouseover(function (){ alert('foo'); });
$('#row-img_2').mouseout(function (){ alert('foo2'); });
Also, note the missing on from the onmouseover.

$('#row-img_1').mouseover(function() {
alert('foo');
});