I can't figure out why this piece of code isn't working:
<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>
There isn't even any error whatsoever.. it just does nothing.
amazingly if I change 'mousedown' to 'keydown' it works
<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('keydown',function(e){
alert(123);
},false);
"></body></html>
(I'm using Chrome btw)
I can't figure out why this piece of code isn't working:
<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>
There isn't even any error whatsoever.. it just does nothing.
amazingly if I change 'mousedown' to 'keydown' it works
<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('keydown',function(e){
alert(123);
},false);
"></body></html>
(I'm using Chrome btw)
Share Improve this question edited Jan 25, 2022 at 18:30 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 5, 2011 at 22:50 PacerierPacerier 89.9k111 gold badges385 silver badges645 bronze badges 2-
Hm, why would you want to attach an event in an
onloadinline event handler... – kapa Commented Jun 5, 2011 at 23:04 -
@bazmegakapa . the file is saved as
test.html– Pacerier Commented Jun 5, 2011 at 23:17
4 Answers
Reset to default 4It works fine (see the code).
Notice that I added some content and added a border to body so that you can see its dimensions. If you remove the content, everything you see is a black line. body does not take up any space if there is no content (like any other block element) which implies you cannot click inside of it.
It seems you thought that body would spread across the whole browser window, but that is not the case.
If you attach the handler to window instead, it gets all events that happen inside the visible area.
The value of this in listeners attached to the body element behaves a little differently in different browsers. Try the following in Firefox and an older version of IE (note that it's specifically for this case, it isn't meant to be a general "what is this?" function):
<head>
<title>Some "this" tests</title>
<script type="text/javascript">
var whatIs = (function(global) {
return function(that) {
// If String(that) isn't useful, try some stuff
if (String(that) == '[object]') {
if (that == global || that == window) {
alert('window');
} else if (typeof that.tagName == 'string') {
alert(that.tagName);
} else {
alert(that);
}
// Otherwise show that
} else {
alert(that);
}
}
})(this);
</script>
</head>
<body onclick="whatIs(this);" onload="whatIs(this);">
<div onmousedown="whatIs(this)">this</div>
</body>
In all browsers, the onload shows window and clicking on the div show this as the div. Clicking on the body shows this to be window in Firefox but the body element in IE, Opera and Chrome.
An alternative is to use jQuery bind. It does not only make you code less but is also supported by most browsers. Try this one:
$('body').bind('click mousedown', function() {
alert(123);
});
Try using the global window object instead:
<!DOCTYPE html>
<html><head></head><body onload="
window.addEventListener('click',function(e){
alert(123);
},false);
"></body></html>
For the given HTML, the body has no height and width, so it will not receive any mouse events when you click on the window. It still can receive key events though. If you give it a height and width, it will work.
<!DOCTYPE html>
<html><head></head><body style="height:1000px; width:1000px" onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>