When Replace Element, What Happen On The Events And Data

I curious to know that when A element has been replaced when ajax load, all the events and data blinded on it will be just disconnected or removed directly? I dont believe any even

Solution 1:

If an event is bound directly to an element (not with delegated event handling), then when that element is removed, so will it's event handler.

Similarly, if any properties or attributes have been added to that DOM element, they go with that particular DOM element so if the DOM element is removed so are they.

If one is using delegated event handling (watching for events that bubble up to a higher level parent object like body or document, then those events will still be in place because the objects the events are actually attached to did not get replaced.

---

Your question isn't tagged with jQuery, but you use some jQuery-like examples so in the jQuery world, an event attached like this:

$("#myObject").on('click', fn);

Will be removed when #myObject is replaced. But, a delegated event like this:

$(document.body).on('click', '#myObject', fn);

Will still be in force, even if #myObject was replaced with a different object with the same ID because the object that the event is actually attached to (document.body in this case) did not get removed or replaced.