Is there any way to catch the document.createElement() event?
For example, somewhere, inside the <body> section I have
<script>
var div = document.createElement("div");
<script>
Is it possible to track that event from the <head> section (using some addEventListener, mutation observer, or any other way)?
Note: I need to track the creation of the element, not the insertion
Is there any way to catch the document.createElement() event?
For example, somewhere, inside the <body> section I have
<script>
var div = document.createElement("div");
<script>
Is it possible to track that event from the <head> section (using some addEventListener, mutation observer, or any other way)?
Note: I need to track the creation of the element, not the insertion
Share edited Jan 3, 2022 at 21:23 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 15, 2014 at 22:09 eawereawer 1,4583 gold badges15 silver badges27 bronze badges 1- There is hardly a reason to have such an event in the DOM. What would you need this for? – Bergi Commented Apr 15, 2014 at 22:30
3 Answers
Reset to default 5Warning This code won't work in every browser. All bets are off when it es to IE.
(function() {
// Step1: Save a reference to old createElement so we can call it later.
var oldCreate = document.createElement;
// Step 2: Create a new function that intercepts the createElement call
// and logs it. You can do whatever else you need to do.
var create = function(type) {
console.log("Creating: " + type);
return oldCreate.call(document, type);
}
// Step 3: Replace document.createElement with our custom call.
document.createElement = create;
}());
This is, similarly to other answers, an imperfect and inplete solution (and is explicitly tested in only Chrome 34 on Windows 8.1):
// creating a function to act as a wrapper to document.createElement:
document.create = function(elType){
// creating the new element:
var elem = document.createElement(elType),
// creating a custom event (called 'elementCreated'):
evt = new CustomEvent('elementCreated', {
// details of the custom event:
'detail' : {
// what was created:
'elementType' : elem.tagName,
// a reference to the created node:
'elementNode' : elem
}
});
// dispatching the event:
this.dispatchEvent(evt);
// returning the created element:
return elem;
};
// assigning an event-handler to listen for the 'elementCreated' event:
document.addEventListener('elementCreated', function(e){
// react as you like to the creation of a new element (using 'document.create()'):
console.log(e);
});
// creating a new element using the above function:
var newDiv = document.create('div');
JS Fiddle demo.
References:
- Creating and triggering events (MDN).
EventTarget.addEventListener().EventTarget.dispatchEvent().
It's possible to create custom Events in javascript. And it's supported by all browsers too.
Check it out: http://jsfiddle/JZwB4/1/
document.createElement = (function(){
var orig = document.createElement;
var event = new CustomEvent("elemCreated");
return function() {
document.body.dispatchEvent(event);
orig.call(document,x);
};
})();
document.body.addEventListener('elemCreated', function(){
console.log('created');
},false);
var x= document.createElement('p'); //"created" in console
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742295102a4416955.html
评论列表（0条）