I have a following script, I need to detect:
- content element has change (size/position for example) or
- body element has change (size/position for example)
I cannot this logic on the button itself.
What are the event available? Could you please provide a sample of code?
/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
window.App = {
start: function () {
var btn = document.getElementById('addContent');
btn.addEventListener('click', function () {
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<p>ADDED LATER - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>';
});
//---
// does not work i need the content
window.addEventListener('resize', function () {
console.log('content / window / resize');
});
var content = document.getElementById('content');
content.addEventListener('change', function () {
console.log('content / div / resize');
}.bind(this));
}
};
</script>
</head>
<body onload="App.start();">
<div id="content">
<button id="addContent" type="button">Add content!</button>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
I have a following script, I need to detect:
- content element has change (size/position for example) or
- body element has change (size/position for example)
I cannot this logic on the button itself.
What are the event available? Could you please provide a sample of code?
http://jsbin.com/sewerumive/1/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
window.App = {
start: function () {
var btn = document.getElementById('addContent');
btn.addEventListener('click', function () {
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<p>ADDED LATER - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>';
});
//---
// does not work i need the content
window.addEventListener('resize', function () {
console.log('content / window / resize');
});
var content = document.getElementById('content');
content.addEventListener('change', function () {
console.log('content / div / resize');
}.bind(this));
}
};
</script>
</head>
<body onload="App.start();">
<div id="content">
<button id="addContent" type="button">Add content!</button>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
- 1 Change event does not work on div/body elements. It will work only for form elements. – Alok Ranjan Commented Jan 8, 2015 at 9:08
- 1 Can I ask what would be causing the change in body? Js? At which point, you could trigger the script you're trying to cast to change()? – Jack hardcastle Commented Jan 8, 2015 at 9:11
- yes from js, but basically I would like centralize this behavior as I have dozen of components which could make the change in body. – GibboK Commented Jan 8, 2015 at 9:15
- just wondering ...if any event exists on the html viewport? – GibboK Commented Jan 8, 2015 at 9:22
3 Answers
Reset to default 13MutationObserver provides a way to react to any changes in a DOM.
Read more at MDN or MSDN
and also this thread enter link description here
Just another suggestion (not sure if it's going to fit your requirements), you can create a custom event and trigger it whenever you want:
window.App = {
start: function () {
var customEvent = new Event("customEvent"), // your custom event
content = document.getElementById('content'),
btn = document.getElementById('addContent');
btn.addEventListener('click', function () {
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<p>ADDED LATER - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>';
// trigger it
content.dispatchEvent(customEvent);
});
content.addEventListener('customEvent', function () {
console.log('content / div / resize');
});
}
};
App.start();<div id="content">
<button id="addContent" type="button">Add content!</button>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>Check this link
And instead of 'change' use 'DOMNodeInserted' and change html of div with ID content instead of innerHTML of body
You can see content / div / resize in your browser console