What are AddThis JavaScript Events?

• Registering an Event Listener
• Event Objects
• Event Types
• Event Examples

When building customized AddThis experiences, or when integrating AddThis with your own web analytics software (like Omniture or Webtrends), it can be useful to know exactly what’s happening in the UI. We dispatch key events asynchronously for your consumption. N.B. Events are dispatched globally; we do not currently support distinguishing between multiple menus on a page.

If you’re not familiar with JavaScript Events, this article is a good starting point.

Registering an Event Listener

AddThis events behave much like standard DOM events. To be notified when an event occurs, you must indicate which event you’d like to listen to and provide a callback function for the event itself. Upon the even being fired, the provided function will be called with the event object as its single argument. Any relevant event metadata will be attached to the event object.

addthis.addEventListener(type, listener);

type is a string representing the event type to listen for.
listener is a reference to the function handling this event.

Example:

// Alert a message when the AddThis API is ready
function addthisReady(evt) {
    alert('AddThis API is fully loaded.');
}

// Listen for the ready event
addthis.addEventListener('addthis.ready', addthisReady);

Event Objects

All AddThis event objects have a type and metadata associated with them.

Let’s look at the skeleton of the event handler from the example above:

function eventHandler(evt) { 
    // evt is the event object
}

The event object will always have a type property indicating which event was dispatched (so you can use the same handler for multiple events).

function eventHandler(evt) { 
    alert(evt.type); // In the example above, this would alert "addthis.ready"
}

Additionally, the event object may provide an data property with additional information about the event. For example, the “addthis.menu.share” event stores which service the user just shared to:

// Alert a message when the user shares somewhere
function shareEventHandler(evt) { 
    if (evt.type == 'addthis.menu.share') { 
        alert(typeof(evt.data)); // evt.data is an object hash containing all event data
        alert(evt.data.service); // evt.data.service is specific to the "addthis.menu.share" event
    }
}

// Listen for the share event
addthis.addEventListener('addthis.menu.share', shareEventHandler);

Event Types

Code	Description	Data
addthis.ready	Dispatched when the API has fully loaded.	none
addthis.menu.open	Dispatched when a menu pane (the compact menu, the expanded menu, or the email form) is opened.	pane : one of “compact”, “expanded” or “email”
addthis.menu.close	Dispatched when a menu pane is closed.	pane : one of “compact”, “expanded” or “email”
addthis.menu.share	Dispatched when the user shares.	service : one of our supported services
addthis.user.clickback	Dispatched when a page loads and the API can detect that the page view originated from a share.	service : the service where the original share occurred hash : unique identifier of the original share

Event Examples

Putting it all together:

<a class="addthis_button"></a>

<script type="text/javascript">
// Alert a message when the user shares somewhere
function eventHandler(evt) { 
    switch (evt.type) {
        case "addthis.menu.open":
            console.log('menu opened; surface=' + evt.data.pane);
            break;
        case "addthis.menu.close":
            console.log('menu closed; surface=' + evt.data.pane);
            break;
        case "addthis.menu.share":
            console.log('user shared to ' + evt.data.service);
            break;
        default:
            console.log('received an unexpected event', evt);
    }
    
    if (evt.type == 'addthis.menu.share') { 
        alert(typeof(evt.data)); // evt.data is an object hash containing all event data
        alert(evt.data.service); // evt.data.service is specific to the "addthis.menu.share" event
    }
}

// Listen to various events
addthis.addEventListener('addthis.menu.open', eventHandler);
addthis.addEventListener('addthis.menu.close', eventHandler);
addthis.addEventListener('addthis.menu.share', eventHandler);
</script>

« Preferred Services & Personalization