Is there a way to get all events that are currently handled? That means not the events that are bound to an element. I mean a way to get all events that are currently fired.
So for better interpretation, something like this (but without declaring each event):
var Records = {};
(function loop() {
$(document).bind('click mousemove change', function(e) {
Records[+new Date()] = {type: e.type};
});
setTimeout(loop, 10);
})();
I know about this: $._data($('*').andSelf().get(0), 'events'); but that gives me only the currently handled/attached events.
Related
I looked at the Google Publisher Tag reference and decided that I could add some events to my ad slots. It works great if I have defined only one slot.
If I add more slots, the events keep repeating on my console number of times I have slots.
So, if I do something like this:
<script type='text/javascript'>
googletag.cmd.push(function() {
var slot1 = googletag.defineSlot('/123456/leadeboard', [[728, 90]], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
var slot2 = googletag.defineSlot('/123456/leadeboard', [[728, 90]], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
var slot3 = googletag.defineSlot('/123456/leadeboard', [[728, 90]], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
console.log('Slot has been rendered:');
});
googletag.enableServices();
});
</script>
My console.log would be 3x "Slot has been rendered:". If I remove two of the .addService from the defineSlot part, it only console.logs it once, but then the ad is not rendered.
Is there a way how to remove extra logging without breaking everything else? It can get extremely messy after a while.
Thanks!
Nastasja,
The reason the output repeats three times is the event handler that you registered listens for the 'slotRenderEnded' event, which happens every time a slot renders. Since your example has three slots, the event will fire three times. You can see which slot triggers the callback by inspecting the event object that is passed in.
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
console.log('Slot has been rendered:');
console.log(event); //inspect event
console.log(event.slot); //inspect slot
});
Even though the the event first three times, you can add slot based logic by comparing the slots in the event like this:
var slot1 = googletag.defineSlot('/123456/leadeboard', [[728, 90]], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
if(slot1 === event.slot){
console.log('slot1 has been rendered');
}
});
You can read more in the GPT documentation
If your setup loads the listeners each time and they are only used once then you can do it this way:
googletag.pubads().addEventListener('GPT-message', function (event) {
someCode();
googletag.pubads().removeEventListener('GPT-message', arguments.callee);
});
I have links on a table to edit or delete elements, that elements can be filtered. I filtered and get the result using ajax and get functions. After that I added (display) the result on the table using inner.html, the issue here is that after filtering the links on the elements not work, cause a have the dojo function like this
dojo.ready(function(){
dojo.query(".delete-link").onclick(function(el){
var rowToDelete = dojo.attr(this,"name");
if(confirm("Really delete?")){
.......
}
});
I need to trigger the event after filtering, any idea?
(I'm assuming that you're using Dojo <= 1.5 here.)
The quick answer is that you need to extract the code in your dojo.ready into a separate function, and call that function at the end of your Ajax call's load() callback. For example, make a function like this:
var attachDeleteEvents = function()
dojo.query(".delete-link").onclick(function(el){
var rowToDelete = dojo.attr(this,"name");
if(confirm("Really delete?")){
.......
}
});
};
Then you call this function both in dojo.ready and when your Ajax call completes:
dojo.ready(function() { attachDeleteEvents(); });
....
var filter = function(someFilter) {
dojo.xhrGet({
url: "some/url.html?filter=someFilter",
handleAs: "text",
load: function(newRows) {
getTableBody().innerHTML = newRows;
attachDeleteEvents();
}
});
};
That was the quick answer. Another thing that you may want to look into is event delegation. What happens in the code above is that every row gets an onclick event handler. You could just as well have a single event handler on the table itself. That would mean there would be no need to reattach event handlers to the new rows when you filter the table.
In recent versions of Dojo, you could get some help from dojo/on - something along the lines of:
require(["dojo/on"], function(on) {
on(document.getElementById("theTableBody"), "a:click", function(evt) {...});
This would be a single event handler on the whole table body, but your event listener would only be called for clicks on the <a> element.
Because (I'm assuming) you're using 1.5 or below, you'll have to do it a bit differently. We'll still only get one event listener for the whole table body, but we have to make sure we only act on clicks on the <a> (or a child element) ourselves.
dojo.connect(tableBody, "click", function(evt) {
var a = null, name = null;
// Bubble up the DOM to find the actual link element (which
// has the data attribute), because the evt.target may be a
// child element (e.g. the span). We also guard against
// bubbling beyond the table body itself.
for(a = evt.target;
a != tableBody && a.nodeName !== "A";
a = a.parentNode);
name = dojo.attr(a, "data-yourapp-name");
if(name && confirm("Really delete " + name + "?")) {
alert("Will delete " + name);
}
});
Example: http://fiddle.jshell.net/qCZhs/1/
I'm triyng to build a simple animation jQuery-plugin. The main idea is to take an element and manipulate it in some way repeatedly in a fixed intervall which would be the fps of the animation.
I wanted to accomplish this through events. Instead of using loops like for() or while() I want to repeat certain actions through triggering events. The idea behind this: I eventualy want to be able to call multiple actions on certain events, like starting a second animation when the first is done, or even starting it when one animation-sequence is on a certain frame.
Now I tried the following (very simplified version of the plugin):
(function($) {
$.fn.animation = function() {
obj = this;
pause = 1000 / 12; //-> 12fps
function setup(o) {
o.doSomething().trigger('allSetUp');
}
function doStep(o, dt) {
o.doSomething().delay(dt).trigger('stepDone');
}
function sequenceFinished(o) {
o.trigger('startOver');
}
function checkProgress(o) {
o.on({
'allSetup': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'stepDone': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'startOver': function(event) {
console.log(event); //check event
resetAll(o);
}
});
}
function resetAll(o) {
/*<-
reset stuff here
->*/
//then start over again
setup(o);
}
return this.each(function() {
setup(obj);
checkProgress(obj);
});
};
})(jQuery);
Then i call the animation like this:
$(document).ready(function() {
$('#object').animation();
});
And then – nothing happens. No events get fired. My question: why? Is it not possible to use events like this inside of a jQuery plugin? Do I have to trigger them 'manualy' in $(document).ready() (what I would not prefer, because it would be a completely different thing – controling the animation from outside the plugin. Instead I would like to use the events inside the plugin to have a certain level of 'self-control' inside the plugin).
I feel like I'm missing some fundamental thing about custom events (note: I'm still quite new to this) and how to use them...
Thx for any help.
SOLUTION:
The event handling and triggering actually works, I just had to call the checkProgress function first:
Instead of
return this.each(function() {
setup(obj);
checkProgress(obj);
});
I had to do this:
return this.each(function() {
checkProgress(obj);
setup(obj);
});
So the event listening function has to be called before any event gets triggered, what of course makes perfect sense...
You need set event on your DOM model for instance:
$('#foo').bind('custom', function(event, param1, param2) {
alert('My trigger')
});
$('#foo').on('click', function(){ $(this).trigger('custom');});
You DOM element should know when he should fire your trigger.
Please note that in your plugin you don't call any internal function - ONLY DECLARATION
Is there a way i can put a jQuery ajax call inside of a variable so i can create a setTimeout for specific events and clearTimeout for specific events? for example if this makes any sense something like this:
var testEvent = function(){ $(this).load("info.php"); };
On specific event
setTimeout("testEvent()",3000);
On another specific event
clearTimeout("testEvent()");
How about a couple of nifty plugin functions to do the trick?
$.fn.loadLater = function (url, time) {
var me = this;
this.data('load-later-timer', setTimeout(function () {
me.load(url);
}, time));
};
$.fn.dontLoadLater = function () {
var timer = this.data('load-later-timer');
if (timer != null) clearTimeout(timer);
};
Use like so:
// Start timer
$(this).loadLater('info.php', 3000);
// Stop timer
$(this).dontLoadLater();
This absolutely makes sense, just do like this:
var id = setTimeout(function() {testEvent()}, 3000);
clearTimeout(id);
Make sure to keep id accessible for both event handlers.
EDIT: I've overseen that you're referring to this inside the testEvent. Assuming that this is some node you're locating using jQuery, the code may look like this:
var id = setTimeout(function() {
$('.your-selector').each(testEvent);
}, 3000);
Element.implement({
addLiveEvent: function(event, selector, fn){
this.addEvent(event, function(e){
var t = $(e.target);
if (!t.match(selector)) return false;
fn.apply(t, [e]);
}.bindWithEvent(this, selector, fn));
}
});
$(document.body).addLiveEvent('click', 'a', function(e){ alert('This is a live event'); });
The above code was done in a similar question to implement .live behaviour in Mootools. I've read the question: Prototype equivalent for jQuery live function.
How do I implement this in Prototype? Probably something that can be implemented like this:
document.liveobserve('click', 'a', function(e){ alert('This is a live event');
Edited to make the question clear.
The simplest (and perhaps not the fastest or best) way would appear to be something like:
Element.live = function(evType, evSelector, evBlock) {
var mySelector = evSelector;
var myBlock = evBlock;
this.observe(evType, function(ev) {
if (ev.target.match(mySelector)) {
evBlock(ev);
}
});
};
The parameters evSelector and evBlock are assigned to local variables so the they are available to the event handler (It's a closure). The passed block evBlock gets passed the event object just like a normal Prototype event handler.
It should be noted this is going to handle every event of type 'evType' so if it's a mouseMove/mouseOver this is going to make your page slow. Also FireBug will probably just go to sleep on you due to the number of events that it has to single step through.
EDIT: Changed as per comments