Is it possible to see (debug) custom events being fired from DOM elements in the browser?
Let's say I want to see which specific element of the Bootstrap Collapse fires the show.bs.collapse event, can I somehow see it for instance in Chrome dev tools?
First off, Monitor Events will handle this for normal JS events. However, Bootstrap events are jQuery events, so vanilla JS event listeners don't listen for them.
To listen to jQuery events run the following code snippet in your console:
jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});
Replace "shown.bs.collapse" with whatever event you want. When they are logged, just check the target element for the event to know what fired it.
Now, for the other way around, to see what is listening to events. Within the elements panel, if you go to the event listener tab and uncheck "ancestors", then you will see only the directly bound event listeners on an element. This way you know what is listening for the event so you can inspect what should be done when it is fired. This matters, since you may find 'body' isn't getting the event, since it could have bubbling cancelled. So if the above snippet isn't working, you need to check for bubble cancelling in the element listening for the event.
Firefox offers out of the box, listeners for jQuery events, https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
But you can extend it: http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/
You can use Visual Event 2 bookmarklet. Great tool used to inspect which events are attached to a specific DOM elements.
Related
I am a svelte beginner and i have a problem with event handlers inside the each block.
In the Repl when i click shuffle multiple times, i have multiple event listener for the heart inside the card. The click event on the card works fine and has only one event listener.
How can i prevent to have multiple event listeners on the heart?
Repl
You could remove they key, that way the items are re-created, and the event handlers aren't sticking around.
{#each dataShow as d (d.poi)} => {#each dataShow as d}
Am trying to use $document.on("dialog-ready", function() { .. } for touch UI dialog customization. Where as i can see the dialog-ready event fires before the dialog content is fully loaded which gives me a unavailability of tags for traversal of dialog html.
Is there any event listener that i can use for triggering a call after my
dialog is fully loaded with all widgets and its values.?
Is there any documentation link where i can find these event
listeners apart from Adobe Experience Manager Help | Using Event
Handlers in Adobe Experience Manager Touch UI Components .?
Also what is the order of sequence AEM loads $document.on("dialog-ready", function() { .. } when compares with $(document).on("foundation-contentloaded", function (e) { .. }.
?
Dialog ready is fired when a dialog is opened. Not necessarily after all values are populated.
Foundation contentloaded is fired when new fields are injected into the dialog. More specifically, according to the documentation, "it should be triggered when a container is injected".
So using foundation-contentloaded is ideal when working with multifields where new fields get added much later. Also, dialog-ready will not be fired in page creation wizard. We have to use foundation-contentloaded here.
Neither of the two will guarantee that all content will be populated for us to start using their values in JavaScript. Especially when we have RTE/multifields in our dialog.
To answer your question,
There are no event listeners that you can use that indicates the dialog is fully loaded.
I noticed foundation-contentloaded fires before dialog-ready
Coral.commons.ready ensures initialization. Especially helpful when working with multifields and RTEs.
Coral.commons.ready(this, () => {
/*
logic to run once coral element 'this' is pointing to is initialized (initialize or _render methods are invoked)
*/
});
More information on foundation-contentloaded and Coral.commons.ready
You can use:
$(document).on("foundation-contentloaded", function(e) {
var container = e.target;
});
Check this link.
Here are more examples:
https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html
Can anyone please help me in getting the list of listeners in Touch UI of AEM 6?
I know one event as keypress, but I would also want to know the event which gets triggered when we change the value from a drop-down in the AEM Form Field of Touch UI.
Only some of the Extjs Listener events are in AEM 6's Granite UI.
one you mentioned is keypress event. Some other events like foundation-contentloaded are mentioned on this page.
other then these, you could use cls property on AEM components and specify the event handlers yourself via the class.
$('.my-select-class').on('change' , function(event){
console.log("Handling Event " , event);
})
I have an HTML5 web-app and "something" attached a click handler to one of my divs.
If I use the Event Listeners tab I can see the click event and all of its properties - but is there any way to break when an event is fired and trace what is executed? That may give me more information on what attached it.
Disregard, found it:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#breakpoints-on-javascript-event-listeners
Simply go into Event Listener Breakpoints under the Sources tab and turn on Mouse > click
I have two widgets listening for a MouseOutEvent. Problem is that sometimes this events does not get called on both of the widgeth even if you mouse out of them.
No error is thrown and this is extremely hard to debug.
My understanding is that this event is fired by a browser, so I don't understand why this is not happening. I am registering this event to the widget itself.
Any suggestions will be a great help.
Thanks
Sounds like you might have used addHandler to register to your MouseOverHandler. Widget has two methods for adding event handlers, addDomHandler and addHandler. The first is meant to be used for DomEvents, e.g. MouseOutEvents. It sinks the event on the widget, which means that your listener will get notified (this is only necessary for DomEvents). Those events might not get fired if you do not use addDomHandler to register your handler.