What's the scope of HTML body?

Question

I'm learning Javascript.

<input type="button" onclick="addP();">

This line works fine.Can I add click event to the body like this?

<body onclick="addP();">

When I click ,I got nothing shows up.But if I add width and height to body, it worked! But just in the limited scope. If you add a background color,it will cover all of the window. The color indicate the window's scope, but not clickable(I don't know if this 'clickable' word exists , hope you understand). I can't vote up because my reputation isn't enough.I will do it later…

Can you provide us with the code for the body? No point in posting the code that works fine — Luke, May 25 '15 at 01:04
if your html is well formed, adding a click event to `body` will trigger anywhere you click on the page - assuming you don't have a more direct element you are clicking on that is preventing the event from bubbling up — CrayonViolent, May 25 '15 at 01:07
@CrayonViolent - If the `body` tag isn't taking the full width/height of the window and there's no other elements in `body` that expand that, it will look as if it isn't working. — Jared Farrish, May 25 '15 at 01:09
If the body doesn't have any content then the height/width will be 0%. The body expands to the height/width of the content (Like a wrap) If you place
test
and click on the word test your function should trigger. — NewToJS, May 25 '15 at 01:10
The click event will only fire for a click in/on the ``. If the `` has no content, then it's _0 px by 0 px_ and you can't possibly click on it to fire the event. The element surrounding the `` element is the `` element, if you're wondering what you are clicking on instead (but I wouldn't usually advise putting event listeners on a `` over the ``). — Paul S., May 25 '15 at 01:12

score 2 · Accepted Answer · edited May 23 '17 at 11:44

Since there isn't a fully-working example, here is one where I've set the html and body tags to be 100% width and height, which make it clickable anywhere on the screen.

Then, I use EventTarget.addEventListener() instead of inline event handlers (e.g., onclick=''), which are better to use in most cases.

And last, I create the p element (which I assume your addP() function is doing) using the document.createElement() DOM method, add text to it, then append it to the document.body element with Node.appendChild().

Keep in mind that, in practice, you generally do not ever want to add things like click handlers or mouse event handlers to the body element, since it will trigger on any of those events on the page. Instead, use an element that's a parent of the element, or document.addEventListener().

<!doctype html>
<html>
<head>
<title></title>
<style>
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
</style>
<script>
window.addEventListener('load', function ol(){
    document.body.addEventListener('click', function cl(){
        var p = document.createElement('p');

        p.textContent = 'Hello World!';

        document.body.appendChild(p);
    });
});
</script>
</head>
<body>
</body>
</html>

http://jsfiddle.net/m3ssssvp/2/

Becareful of the addEventListener incompatability with IE 8 and earlier. The mozilla dev site give details and polyfills https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility — , May 25 '15 at 01:20
@jeff - For the record, [neither is `Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). — Jared Farrish, May 25 '15 at 01:27

omikes · Answer 2 · 2015-05-25T01:10:38.190

-3

try expanding the body fully

document.getElementsByTagName('body')[0].style.height = '100%';
document.getElementsByTagName('body')[0].style.width = '100%';

trigger this right when the document loads, or if you know CSS, use that equivalent.

edited May 25 '15 at 01:10

answered May 25 '15 at 01:06

omikes

8,064
8
37
50

3

jQuery isn't tagged in this question and if you plan to give a jQuery solution, I would recommend clearly pointing out this is jQuery since it isn't tagged. – NewToJS May 25 '15 at 01:07
he's using a function, so he knows javascript. this should be fine now. – omikes May 25 '15 at 01:17

What's the scope of HTML body?

2 Answers2