Track Visual Navigation Menu Changes Using Event Listeners - JS Only

I need to track a visual navigation using JS only (No jQuery please)  and event listeners. I need to capture on a SPA the actual title (e.g. Account Settings in this example) and also when the step changes. So below the code shows class of "progressStep current" , title of "Account Settings". I want "Account Settings"  returned. Below is an example of the step 2 on-state.

<div class="progressStep current">
    <div class="stepIcon">
        <span class="image"><img src="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-step-2-on.gif" alt="progress Step 2"></span>
        <span class="title">Account Settings</span><span class="separator"><img src="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-arrow-spacer.gif" alt="arrow spacer"></span>
    </div>
</div>

Select allOpen in new window

Below is an example of the visual navigation for step 3 in the off-state (next inline of the above example), class of "progressStep" for comparison

<div class="progressStep ">
    <div class="stepIcon">
        <span class="image"><img src="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-step-3-off.gif" alt="progress Step 3"></span>
        <span class="title">Review</span><span class="separator"><img src="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-arrow-spacer.gif" alt="arrow spacer"></span>
    </div>

</div>

Select allOpen in new window

So I want to grab the title as the SPA progresses. No Xpath and IE 11 compatible. My code is injected via a TMS so I can't change any mark-up on the page hence the need for event listeners.

Thanks!