document.body.removeEventListener removes ALL click event listeners (not the specified function) why?
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page. why? Am I not clearly specifying what function I want removed from the document.body?
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
function delElm(e)
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
dynamicLinkCheckOutput.parentNode.removeChild(dynamicLinkCheckOutput);
//document.body.removeEventListener("click", delElm); //moved for clairity
setTimeout(function()
dynamicLinkCheckOutput.onclick = function(e)
e.stopPropagation();
;
document.body.addEventListener("click", delElm);
document.body.removeEventListener("click", delElm); //ALL click events from ALL elements have been removed the moment this line executes.
, 0);
javascript dom
add a comment |
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page. why? Am I not clearly specifying what function I want removed from the document.body?
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
function delElm(e)
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
dynamicLinkCheckOutput.parentNode.removeChild(dynamicLinkCheckOutput);
//document.body.removeEventListener("click", delElm); //moved for clairity
setTimeout(function()
dynamicLinkCheckOutput.onclick = function(e)
e.stopPropagation();
;
document.body.addEventListener("click", delElm);
document.body.removeEventListener("click", delElm); //ALL click events from ALL elements have been removed the moment this line executes.
, 0);
javascript dom
add a comment |
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page. why? Am I not clearly specifying what function I want removed from the document.body?
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
function delElm(e)
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
dynamicLinkCheckOutput.parentNode.removeChild(dynamicLinkCheckOutput);
//document.body.removeEventListener("click", delElm); //moved for clairity
setTimeout(function()
dynamicLinkCheckOutput.onclick = function(e)
e.stopPropagation();
;
document.body.addEventListener("click", delElm);
document.body.removeEventListener("click", delElm); //ALL click events from ALL elements have been removed the moment this line executes.
, 0);
javascript dom
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page. why? Am I not clearly specifying what function I want removed from the document.body?
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
function delElm(e)
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');
dynamicLinkCheckOutput.parentNode.removeChild(dynamicLinkCheckOutput);
//document.body.removeEventListener("click", delElm); //moved for clairity
setTimeout(function()
dynamicLinkCheckOutput.onclick = function(e)
e.stopPropagation();
;
document.body.addEventListener("click", delElm);
document.body.removeEventListener("click", delElm); //ALL click events from ALL elements have been removed the moment this line executes.
, 0);
javascript dom
javascript dom
asked Nov 13 '18 at 19:19
SamSam
246
246
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page
No, it doesn't. But this does:
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
Using +=
on innerHTML
forces the browser to:
- Spin through all of the elements inside
body
building an HTML string for them. - Return that string to the JavaScript layer, which then adds on the string on the right-hand side.
- Parse the string assigned back to
innerHTML
by the JavaScript layer, wipe out all elements withinbody
(thus losing their event handlers and most other state), and create new, replacement elements for them from the parsed HTML.
If you want to append to body
(or any other element), don't use innerHTML += x
, use:
insertAdjacentHTML
:document.body.insertAdjacentHTML("beforeend", "<div id='dynamicLinkCheckOutput'></div>");
or
createElement
andappendChild
:var div = document.createElement("div");
div.id = "dynamicLinkCheckOutput";
document.body.appendChild(div);or
Various other DOM methods. More to explore: DOM on MDN.
1
serves me right for cutting corners 🤦. Thanks TJ!
– Sam
Nov 13 '18 at 19:38
@Sam - A pleasure. Happy coding! :-)
– T.J. Crowder
Nov 13 '18 at 19:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288090%2fdocument-body-removeeventlistener-removes-all-click-event-listeners-not-the-spe%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page
No, it doesn't. But this does:
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
Using +=
on innerHTML
forces the browser to:
- Spin through all of the elements inside
body
building an HTML string for them. - Return that string to the JavaScript layer, which then adds on the string on the right-hand side.
- Parse the string assigned back to
innerHTML
by the JavaScript layer, wipe out all elements withinbody
(thus losing their event handlers and most other state), and create new, replacement elements for them from the parsed HTML.
If you want to append to body
(or any other element), don't use innerHTML += x
, use:
insertAdjacentHTML
:document.body.insertAdjacentHTML("beforeend", "<div id='dynamicLinkCheckOutput'></div>");
or
createElement
andappendChild
:var div = document.createElement("div");
div.id = "dynamicLinkCheckOutput";
document.body.appendChild(div);or
Various other DOM methods. More to explore: DOM on MDN.
1
serves me right for cutting corners 🤦. Thanks TJ!
– Sam
Nov 13 '18 at 19:38
@Sam - A pleasure. Happy coding! :-)
– T.J. Crowder
Nov 13 '18 at 19:46
add a comment |
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page
No, it doesn't. But this does:
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
Using +=
on innerHTML
forces the browser to:
- Spin through all of the elements inside
body
building an HTML string for them. - Return that string to the JavaScript layer, which then adds on the string on the right-hand side.
- Parse the string assigned back to
innerHTML
by the JavaScript layer, wipe out all elements withinbody
(thus losing their event handlers and most other state), and create new, replacement elements for them from the parsed HTML.
If you want to append to body
(or any other element), don't use innerHTML += x
, use:
insertAdjacentHTML
:document.body.insertAdjacentHTML("beforeend", "<div id='dynamicLinkCheckOutput'></div>");
or
createElement
andappendChild
:var div = document.createElement("div");
div.id = "dynamicLinkCheckOutput";
document.body.appendChild(div);or
Various other DOM methods. More to explore: DOM on MDN.
1
serves me right for cutting corners 🤦. Thanks TJ!
– Sam
Nov 13 '18 at 19:38
@Sam - A pleasure. Happy coding! :-)
– T.J. Crowder
Nov 13 '18 at 19:46
add a comment |
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page
No, it doesn't. But this does:
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
Using +=
on innerHTML
forces the browser to:
- Spin through all of the elements inside
body
building an HTML string for them. - Return that string to the JavaScript layer, which then adds on the string on the right-hand side.
- Parse the string assigned back to
innerHTML
by the JavaScript layer, wipe out all elements withinbody
(thus losing their event handlers and most other state), and create new, replacement elements for them from the parsed HTML.
If you want to append to body
(or any other element), don't use innerHTML += x
, use:
insertAdjacentHTML
:document.body.insertAdjacentHTML("beforeend", "<div id='dynamicLinkCheckOutput'></div>");
or
createElement
andappendChild
:var div = document.createElement("div");
div.id = "dynamicLinkCheckOutput";
document.body.appendChild(div);or
Various other DOM methods. More to explore: DOM on MDN.
document.body.removeEventListener("click", delElm);
removes all "onclick" events for the entire page
No, it doesn't. But this does:
document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
Using +=
on innerHTML
forces the browser to:
- Spin through all of the elements inside
body
building an HTML string for them. - Return that string to the JavaScript layer, which then adds on the string on the right-hand side.
- Parse the string assigned back to
innerHTML
by the JavaScript layer, wipe out all elements withinbody
(thus losing their event handlers and most other state), and create new, replacement elements for them from the parsed HTML.
If you want to append to body
(or any other element), don't use innerHTML += x
, use:
insertAdjacentHTML
:document.body.insertAdjacentHTML("beforeend", "<div id='dynamicLinkCheckOutput'></div>");
or
createElement
andappendChild
:var div = document.createElement("div");
div.id = "dynamicLinkCheckOutput";
document.body.appendChild(div);or
Various other DOM methods. More to explore: DOM on MDN.
answered Nov 13 '18 at 19:23
T.J. CrowderT.J. Crowder
683k12112121306
683k12112121306
1
serves me right for cutting corners 🤦. Thanks TJ!
– Sam
Nov 13 '18 at 19:38
@Sam - A pleasure. Happy coding! :-)
– T.J. Crowder
Nov 13 '18 at 19:46
add a comment |
1
serves me right for cutting corners 🤦. Thanks TJ!
– Sam
Nov 13 '18 at 19:38
@Sam - A pleasure. Happy coding! :-)
– T.J. Crowder
Nov 13 '18 at 19:46
1
1
serves me right for cutting corners 🤦. Thanks TJ!
– Sam
Nov 13 '18 at 19:38
serves me right for cutting corners 🤦. Thanks TJ!
– Sam
Nov 13 '18 at 19:38
@Sam - A pleasure. Happy coding! :-)
– T.J. Crowder
Nov 13 '18 at 19:46
@Sam - A pleasure. Happy coding! :-)
– T.J. Crowder
Nov 13 '18 at 19:46
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288090%2fdocument-body-removeeventlistener-removes-all-click-event-listeners-not-the-spe%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown