一、
1.如果body里面什么都不放，则给body加点击事件，发现并不能alert相应的东西。因为在body里面不放东西的时候body是根本没有被撑起来的，当我放了一个按钮进去，则body就被撑了起来，只有按钮那么高。点击除了按钮那一块之外的地方也是不行的。但是如果给document加点击事件就是可以的。
2.document的第一个子节点才是html。第0 个子节点视频里面讲的是！<!DOCTYPE html>但是我自己试验是undefined
<document>就像一个隐藏的节点，他包括了<!DOCTYPE html> 和<html>甚至包含了文档头的说明。
3.如果要给整个页面加事件，就要给document加，因为给body加可能撑不开。
二、事件对象
event.clientX event.clientY 在火狐下根本不认，根本没有反应。控制台报错，event没有定义。
在低版本的chrome下也不认。所以这个一般就是认为是ie下的写法。
在火狐下，要传个参数，这个参数是系统传的。
解决方法是 document.onclick = function(ev){
var oEvent = ev||event;
alert(oEvent.clientX+‘,‘);};这个地方如果ev和event的顺序换一下就会在火狐下就会报event undefined的错误。同样的道理在用if来解决兼容性的问题的时候也是这样，必须把ev放在前面。
三、事件流
1.事件冒泡
<!DOCTYPE html>
<html onclick="alert(‘woshihtml‘);">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
padding: 10px;
}
</style>
</head>
<body onclick="alert(‘woshi body‘);">
<div style="background:yellow;" onclick="alert(this.style.background);">
<div style="background: blue" onclick="alert(this.style.background);">
<div style="background: red" onclick="alert(this.style.background);"></div>
</div>
</div>
</body>
</html>
点击最里面的div他会一级一级的往上传，到body再到html最后到document。
事件冒泡在一些情况下会带来一些麻烦。比如下面的例子中，就是用了一个事件的cancelBubble来阻止事件冒泡。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background: red;
display: none;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementsByTagName(‘input‘)[0];
var oDiv = document.getElementsByTagName(‘div‘)[0];
oBtn.onclick = function (ev) {
oDiv.style.display =‘block‘;
var oEvent = ev||event;
oEvent.cancelBubble= true;
};
document.onclick = function (){
oDiv.style.display=‘none‘;
}
};
</script>
</head>
<body>
<input type="button" value="xianshi"/>
<div></div>
</body>
</html>
时间： 2024-10-17 00:37:51