CKEditor loses event handlers attached to DOM nodes when performing an Undo/Redo operation

[Christophe Guillou]

Steps to reproduce

1. Open a CKEditor with HTML Source plugin
2. Switch to HTML Source view
3. Paste this snippet:

<a id="link1" href="javascript:;">Hover me!</a>

4. Switch to Rich Text view
5. Observe the hyperlink is created and has no action on hover
6. From the console, type:

window.frames[0].document.getElementById('link1').addEventListener('mouseover', function(){alert('Hello!');});

This will add an onmouseover event listener to the hyperlink;

7. Hover the hyperlink
8. Observe an alert dialog pops up with the message Hello!
9. Type some text after the hyperlink, e.g. aaa
10. Hit Undo or type Ctrl+Z
11. Hover the hyperlink again

Expected result The alert dialog pops up with the message Hello! again

Actual result Nothing happens

This defect can be reproduced on the CKEditor 4.4.2 nightly

​http://nightly.ckeditor.com/14-06-03-06-06/full/samples/replacebyclass.html

Looks related to : ​https://dev.ckeditor.com/ticket/11677

[Piotrek Koszuliński]

Unfortunately, this is won't fix, because this cannot be fixed. Undoing, redoing and many other actions mean taking a previously created snapshot of a content and loading it to the editable element. Unfortunately, listeners added by addEventListener cannot be cloned together with content - neither if cloning happens by serialising to HTML string and creating new document fragment from it, nor when using native cloneNode method. In both cases all listeners except inline ones (on* attributes) are forgotten.

However, the workaround (or rather the correct way to listen to events in editable element or generally - dynamically changing DOM tree) is to use events delegation.

Here's a nice article about this technique: ​http://learn.jquery.com/events/event-delegation/

The idea bases on "events bubbling" which means that event is not only fired on its target but on the entire DOM tree down to the root.

A simplified event delegation could look like this:

editor.on( 'contentDom', function() {
	editor.editable().attachListener( editor.editable(), 'mouseover', function( evt ) {
		// Check where the event started. This needs to be improved
		// because <a> may have children and then target will be set to them.
		if ( evt.data.getTarget().is( 'a' ) )
			console.log( 'mouseover' );
	} );
} );

See that mouseover is logged on the console after redoing, copy&paste, switching between modes, etc.

---

An alternative solution could be to use widgets because they make it possibile to perform custom actions when specific widget is initialised (what happens after undo, redo, pasting, switching between modes, etc). However, widget system has some limitations, so analysis is required to make a decision if they are the right choice.

PS. Events delegation is heavily used in widget system :).

[Christophe Guillou]

Thanks very much, it has been very helpful to us. We will relay the information to our customer. Thanks again for your very prompt response, really appreciate this.