Is there a easy way to find all js events that are associated with a specific HTML element using Chrome?
Example:
HTML element
Cancel
Script:
<script type="text/javascript">
$(function () {
$(".cancel_link").click(function () {
//do something
});
$(".refresh_page").click(function () {
//do something
});
});
</script>
Find the html element in the Elements panel of the dev tools. Then click the Event Listeners tab in the right panel. In the top right hand corner of that Event Listeners panel there's a filter icon. When you click on it you can choose "All Nodes" (default) or "Selected Node Only".
Press F12 to open Developer Tools
Click the Elements tab
Select the element you with to analyze
On the right hand side click the Event Listeners tab
From that tab you can view all of the handlers bound to the element for each event.
Since you seem to use jquery, here is a previously posted solution:
// Bind up a couple of event handlers
$("#foo").on({
click: function(){ alert("Hello") },
mouseout: function(){ alert("World") }
});
// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );
you can find out more here: Can I find events bound on an element with jQuery?
Related
I'm using the code below on my content_script to get mouse target, however, it doesn't get the 'click' trigger on a dropdown with elements created at runtime.
By that I mean, I can see the target of everything, even the dropdown itself, just the elements created are not triggering the function.
$(window).on('click', function(event){
{
console.log(event.target);
}
good to mention mousemove works fine
document.onmousemove = function(e)
{
console.log(e.target);
}
my dropdown is basically a bunch of 'li' inside a 'ul' element, created from another js, displayed as a dropdown, does anyone have any ideas?
The event binding code must be executed when the element it binds to is already there. You need to use Event Delegation with.on() Same question answered here
example:
$(document).on('.select2-results__options .select2-results__option','selector', function(event){
console.log(event.target);
});
I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use.
How do I do that using Chrome Web Developer?
You can use monitorEvents function.
Just inspect your element (right mouse click → Inspect on visible element or go to Elements tab in Chrome Developer Tools and select wanted element) then go to Console tab and write:
monitorEvents($0)
Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.
To stop getting this data just write this to console:
unmonitorEvents($0)
$0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementById or querySelector).
You can also specify event "type" as second parameter to narrow monitored events to some predefined set. For example:
monitorEvents(document.body, 'mouse')
List of this available types is the following as of 2023-01-30:
mouse
"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key
"keydown", "keyup", "keypress", "textInput"
touch
"touchstart", "touchmove", "touchend", "touchcancel"
control
"resize", "scroll", "zoom", "focus", "blur", "select", "change",
"submit", "reset"
Taken from here.
I made a small gif that illustrates how this feature works:
Hit F12 to open Dev Tools
Click the Sources tab
On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
Click on the events you want to listen for.
Interact with the target element, if they fire you will get a break point in the debugger
Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)
Visual Event is a nice little bookmarklet that you can use to view an element's event handlers. On online demo can be viewed here.
For jQuery (at least version 1.11.2) the following procedure worked for me.
Right click on the element and open 'Chrome Developer Tools'
Type $._data(($0), 'events'); in the 'Console'
Expand the attached objects and double click the handler: value.
This shows the source code of the attached function, search for part of that using the 'Search' tab.
And it's time to stop re-inventing the wheel and start using vanilla JS events ... :)
This won't show custom events like those your script might create if it's a jquery plugin. for example :
jQuery(function($){
var ThingName="Something";
$("body a").live('click', function(Event){
var $this = $(Event.target);
$this.trigger(ThingName + ":custom-event-one");
});
$.on(ThingName + ":custom-event-one", function(Event){
console.log(ThingName, "Fired Custom Event: 1", Event);
})
});
The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-one"
To list all event handlers on the window object in Chrome, you can type window.getEventListeners(window) or for a specific element window.getEventListeners(document.body)
I have a page where content is spread over several tabs. The user clicks each tab (anchor inside an <li>) in order to switch. I would like to anchor some other text to trigger the onClick of a tab in order to also switch the content.
Is this possible with javascript/jquery?
Yes. You can invoke a click event on another element using jQuery's .click();
Trigger tab click
Where #tablink is the ID of the tab you want to trigger.
More info: http://api.jquery.com/click/
You can achieve that with Jquery which is simple and easy to use. what you can actually do is that , you can attach a event eg., click to a event handler, which would do the stuff like loading appropriate content on to your current tab.
well this can be achieved by attaching the event to the event handler using a selector. .on() function is used as per the latest jquery lib although .click() also would work but its advisable to use .on() as it handles event delegation as well.
Example:
$( ".tab a" ).on( "click", function() {
// load the appropriate content to the current clicked tab
});
REF:
http://api.jquery.com/on/
Jsfiddle to play with :
http://jsfiddle.net/dreamweiver/h4JXs/1732/
Happy Coding :)
I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use.
How do I do that using Chrome Web Developer?
You can use monitorEvents function.
Just inspect your element (right mouse click → Inspect on visible element or go to Elements tab in Chrome Developer Tools and select wanted element) then go to Console tab and write:
monitorEvents($0)
Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.
To stop getting this data just write this to console:
unmonitorEvents($0)
$0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementById or querySelector).
You can also specify event "type" as second parameter to narrow monitored events to some predefined set. For example:
monitorEvents(document.body, 'mouse')
List of this available types is the following as of 2023-01-30:
mouse
"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key
"keydown", "keyup", "keypress", "textInput"
touch
"touchstart", "touchmove", "touchend", "touchcancel"
control
"resize", "scroll", "zoom", "focus", "blur", "select", "change",
"submit", "reset"
Taken from here.
I made a small gif that illustrates how this feature works:
Hit F12 to open Dev Tools
Click the Sources tab
On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
Click on the events you want to listen for.
Interact with the target element, if they fire you will get a break point in the debugger
Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)
Visual Event is a nice little bookmarklet that you can use to view an element's event handlers. On online demo can be viewed here.
For jQuery (at least version 1.11.2) the following procedure worked for me.
Right click on the element and open 'Chrome Developer Tools'
Type $._data(($0), 'events'); in the 'Console'
Expand the attached objects and double click the handler: value.
This shows the source code of the attached function, search for part of that using the 'Search' tab.
And it's time to stop re-inventing the wheel and start using vanilla JS events ... :)
This won't show custom events like those your script might create if it's a jquery plugin. for example :
jQuery(function($){
var ThingName="Something";
$("body a").live('click', function(Event){
var $this = $(Event.target);
$this.trigger(ThingName + ":custom-event-one");
});
$.on(ThingName + ":custom-event-one", function(Event){
console.log(ThingName, "Fired Custom Event: 1", Event);
})
});
The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-one"
To list all event handlers on the window object in Chrome, you can type window.getEventListeners(window) or for a specific element window.getEventListeners(document.body)
http://jsfiddle.net/waitinforatrain/8AqgU/
The example in that link shows a nested ordered list. If you open up your Chrome/Firebug console, you can see that clicking a child element causes a .click() event on its parents as well.
Is there a way to just detect the .click() on the visible foreground element that was clicked?
You just need to stop the propogation of the click:
$('#toc li').click(function(e) {
console.log ($(this).attr('id'));
e.stopPropagation();
});
Check out this page for more info