How to implement OnEnter and OnExit event on ContentControl using Javascript API for Word 2016

You would need to use a combination of APIs to implement that functionality with the current API set:

1. First add an event handler for the Document.selectionChanged event.
2. Every time the event fires, get the Range object corresponding to the selection in the document, using the Document.getSelection() API.
3. Check the range to see if there's a content control in it, using the Range.contentControls relationship.

-Michael (PM for add-ins)

Good question! We do have an onEnter event for content controls (we call it binding.selectionChanged. We also have a binding.dataChanged event who gets triggered if the user changes the content and exits the content control

so an alternative solution to what Michael proposed is to create bindings for each content control in the document and then register for such events.

you can achieve this by: 1. traversing the content control collection.(use body.contentControls collection) 2. for each content control, grab or set the title and use it to create a binding by named item. check the bindings.addFromNamedItem method. 3. on the callBack make sure to subscribe to the selectionChanged (or DataChanged) for the binding. the create binding code and register to the events will look like this:

function CreateCCSelectionChangedEvent() {
        Office.context.document.bindings.addFromNamedItemAsync("TitleOfTheContentControl", { id: 'Binding01' }, function (result) {
            if (result.status == 'succeeded') {
                result.value.addHandlerAsync(Office.EventType.BindingSelectionChanged, handler);
            }
        });
       
    }

    function handler() {
       console.log("Event Triggered!");
    }

Hope this helps!

Michael, My company tried this approach a few years ago in a VSTO addin. It ended badly. The problem is the number of events you have to handle is horrific. The performance penalty is drastic and grows with the document size.