DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

SBOMs are essential to circumventing software supply chain attacks, and they provide visibility into various software components.

Related

  • Process Mining Key Elements
  • Better Scaffolding with jQuery - Part I
  • Validating EDI Data in Java
  • MongoDB Change Streams and Go

Trending

  • Continuous Quality Engineering: The Convergence of CI/CD, Chaos Testing, and AI-Powered Test Orchestration
  • 10 Predictions Shaping the Future of Web Data Extraction Services
  • Leveraging AI: A Path to Senior Engineering Positions
  • When MySQL, PostgreSQL, and Oracle Argue: Doris JDBC Catalog Acts as the Peacemaker
  1. DZone
  2. Coding
  3. Frameworks
  4. How To Find Events Bound To An Element With jQuery

How To Find Events Bound To An Element With jQuery

By 
Paul Underwood user avatar
Paul Underwood
·
May. 29, 13 · Interview
Likes (0)
Comment
Save
Tweet
Share
51.5K Views

Join the DZone community and get the full member experience.

Join For Free

In this tutorial we are going to investigate ways you can tell what events a certain element has bound to it. This is really useful when you need to debug the on method to see how it is working.

There are a number of ways to bind events to an element, there is bind(), live() and delegate().

  • Bind - Used to attach events to current elements on the page. If new elements are added with the same selector the event will not be added to the element.
  • Live - This is used to attach an events to all elements on the page and future elements with the same selector.
  • Delegate - This is used to attach events to all elements on the page and future elements based on a specific root element.


As of jQuery 1.7 the on method will give you all the functionality that you need to bound events to elements. It will allow you to add an event to all elements on the page and all future elements.

$('.element').on('click', function(){
     // stuff
});
$('.element').on('hover', function(){
     // stuff
});
$('.element').on('mouseenter', function(){
     // stuff
});
$('form').on('submit', function(){
     // stuff
});

When you are assigning events to future elements you might want to find out what events are currently assigned to these elements.

Using developer tools in your browser you can see what events are currently bound to the element by using these 2 methods. First you can display the events by using the console, the second method is to view the events in the event listener window in the developer tools.

Display Events In Console

In your browser if you press F12 a new window called developer tools will open, this allows you to view the entire HTML DOM in more detail, this also has a console feature which will allow you to type in any Javascript to run at this current time on the page.

You can use the console to display a list of events currently assigned to an element by using the following code.

$._data( $('.element')[0], 'events' );

This will display all the events that are currently assigned to the element.
console

Event Listener Window

The other option to use to view what events are currently assigned to an element is to use the event listener window in your browser's developer tools. All you have to do is press F12 to open the developer tools, select the element in the HTML DOM that you want to investigate, on the right side of the window you will see an option called Event Listeners.

When you expand this menu you will see all the current events assigned to the element including all click events bound from jQuery.

event_listener





Event Element JQuery

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Process Mining Key Elements
  • Better Scaffolding with jQuery - Part I
  • Validating EDI Data in Java
  • MongoDB Change Streams and Go

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: